A multi-line text input with label, size, variant, auto-resize, and character counter support. Mirrors the Input component's API.
A plain textarea that accepts any standard HTML attribute via pass-through.
<x-ui::textarea placeholder="Enter your message..." />
<x-ui::textarea name="bio" placeholder="Tell us about yourself..." :rows="3" />Three sizes — sm, md (default), lg — matching the Input component's size scale exactly.
<x-ui::textarea size="sm" placeholder="Small textarea..." :rows="2" />
<x-ui::textarea size="md" placeholder="Medium textarea..." :rows="3" />
<x-ui::textarea size="lg" placeholder="Large textarea..." :rows="3" />default has a visible border. filled uses a gray background with no border — good for forms inside cards.
{{-- Default --}}
<x-ui::textarea variant="default" placeholder="Default variant..." />
{{-- Filled --}}
<x-ui::textarea variant="filled" placeholder="Filled variant..." />The label prop renders a linked label above the field. Clicking the label focuses the textarea.
<x-ui::textarea
name="bio"
label="Bio"
placeholder="Tell us a little about yourself..."
:rows="4"
/>
<x-ui::textarea
name="feedback"
label="Feedback"
size="sm"
variant="filled"
placeholder="Share your thoughts..."
:rows="3"
/>Add auto-resize to grow the textarea with its content. The manual resize handle is hidden. Try typing multiple lines.
<x-ui::textarea
name="notes"
label="Notes"
auto-resize
:rows="2"
placeholder="Start typing — the field expands automatically..."
/>Use show-count alone for a bare counter, or combine with max-length to show a limit indicator updated live as you type.
{{-- Count only --}}
<x-ui::textarea
name="summary"
label="Summary"
:show-count="true"
placeholder="Write a short summary..."
/>
{{-- Count with max length --}}
<x-ui::textarea
name="tweet"
label="Post"
:max-length="280"
:show-count="true"
:rows="3"
placeholder="What's on your mind?"
/>
{{-- Max length only (no visible counter, browser enforces limit) --}}
<x-ui::textarea
name="headline"
label="Headline"
:max-length="100"
:rows="2"
placeholder="Keep it under 100 characters..."
/>Disabled prevents all interaction and dims the field. Readonly allows reading but not editing. Both are standard HTML attributes passed through.
{{-- Disabled --}}
<x-ui::textarea
label="Disabled"
disabled
placeholder="This field is disabled..."
/>
{{-- Readonly --}}
<x-ui::textarea
label="Readonly"
readonly
>This content is read-only and cannot be edited by the user.</x-ui::textarea>A contact form composing textarea with input components, showing a realistic use-case with auto-resize and a character-limited message field.
We'll get back to you within 24 hours.
<x-ui::card>
<div class="space-y-1 mb-6">
<x-ui::heading level="6">Contact us</x-ui::heading>
<x-ui::text variant="muted">We'll get back to you within 24 hours.</x-ui::text>
</div>
<form class="space-y-4">
<div class="grid grid-cols-2 gap-4">
<x-ui::input name="first_name" label="First name" placeholder="Jane" />
<x-ui::input name="last_name" label="Last name" placeholder="Doe" />
</div>
<x-ui::input name="email" label="Email" type="email" placeholder="jane@example.com" />
<x-ui::textarea
name="subject"
label="Subject"
auto-resize
:rows="1"
placeholder="What is this about?"
/>
<x-ui::textarea
name="message"
label="Message"
:rows="5"
:max-length="1000"
:show-count="true"
placeholder="Describe your question or feedback..."
/>
<div class="flex justify-end gap-3 pt-2">
<x-ui::button variant="ghost">Cancel</x-ui::button>
<x-ui::button variant="primary">Send message</x-ui::button>
</div>
</form>
</x-ui::card>