Kaiko UI Kaiko UI

Textarea

Stable

Multiline text input component with labels, validation states, and multiple styling options.

API Reference

Attribute Description Type Default
id HTML id for the textarea element; auto-generated if omitted string ""
label Field label text string ""
color Textarea color theme string ""
size Textarea size variant string "md"
rows Number of visible text rows number 4
bordered Adds textarea border styling boolean False
ghost Ghost variant with minimal styling boolean False
disabled Disables the textarea boolean False
required Marks the textarea as required boolean False
hint Helper text shown below the textarea string ""
error Single error message text string ""
errors List of error message strings list []
hx HTMX event integration for server-side reactivity string ""

color

primary secondary accent info success warning error

size

xs sm md lg

Accessibility

Labels: always provide a label so the textarea has an accessible name. The component auto-generates a matching id / for relationship.

Required: mark required fields with required and pair with a visible indicator so users know which fields must be filled.

Errors: error messages are associated with the textarea via aria-describedby so screen readers announce the error on focus.

Examples

Usage 


<c-textarea label="Message" required placeholder="Enter your message...">
  Sample content
</c-textarea>

Basic Textarea 

<c-textarea label="Message" required placeholder="Enter your message...">
  Sample content
</c-textarea>

Colors 

<c-textarea label="Primary" color="primary">Primary content</c-textarea>

Sizes 

<c-textarea label="Large" size="lg">Large content</c-textarea>

Variants 

<c-textarea label="Ghost" ghost>Ghost content</c-textarea>

States

We will never share your message.
Message must be at least 10 characters
Message is required
Must be at least 10 characters 
<c-textarea label="Required Field" required>Required content</c-textarea>

<c-textarea label="With Hint" hint="We will never share your message.">
  Optional content
</c-textarea>

<c-textarea label="With Error" error="Message too short">Invalid content</c-textarea>

<c-textarea label="With Errors" :errors="['Message is required', 'Must be at least 10 characters']">
  Missing content
</c-textarea>