<x-bt-textarea />
Customize via presets →
Basic Usage
A simple textarea with label and placeholder. Includes a copy button and character counter by default.
1<x-bt-textarea name="basic-notes" label="Notes" placeholder="Enter your notes..." />Initial Value
Pass initial content via the default slot. The component also respects old() values for form repopulation after validation failures.
1<x-bt-textarea name="bio-initial" label="Bio">This is my default bio text.</x-bt-textarea>Auto-Resize
When enabled, the textarea grows vertically to fit its content. Manual resize handles are disabled.
1<x-bt-textarea name="auto-notes" label="Auto-Growing Notes" :auto-resize="true" placeholder="Start typing and watch the textarea grow..." />Character Counter
The counter is shown by default. When max-length is set, it displays count / max with red styling at the limit.
The max-length prop enforces a maximum character count via the native maxlength attribute.
1<x-bt-textarea name="counter-bio" label="Short Bio" :max-length="160" placeholder="Tell us about yourself..." />2<x-bt-textarea name="counter-hidden" label="No Counter" :show-counter="false" placeholder="Counter is hidden..." />Copy Button
A clipboard button appears in the top-right corner by default. It copies the textarea content and shows a checkmark for 1.6 seconds.
1<x-bt-textarea name="no-copy" label="No Copy Button" :show-copy-button="false" placeholder="Copy button is hidden..." />Resize Control
Control the CSS resize behavior with the resize prop. When auto-resize is enabled, resize is forced to none.
1<x-bt-textarea name="resize-none" label="No Resize" resize="none" placeholder="Cannot be resized" />2<x-bt-textarea name="resize-y" label="Vertical Only (default)" resize="y" placeholder="Resize vertically" />3<x-bt-textarea name="resize-both" label="Both Directions" resize="both" placeholder="Resize in any direction" />Rows
Set the initial number of visible text rows. When auto-resize is enabled, this defines the minimum height.
1<x-bt-textarea name="rows-2" label="2 Rows" :rows="2" placeholder="Short..." />2<x-bt-textarea name="rows-8" label="8 Rows" :rows="8" placeholder="Tall..." />Sizes
Five size presets that affect padding and font size.
1<x-bt-textarea xs name="size-xs" label="Extra Small" placeholder="xs" />2<x-bt-textarea sm name="size-sm" label="Small" placeholder="sm" />3<x-bt-textarea name="size-md" label="Medium (default)" placeholder="md" />4<x-bt-textarea lg name="size-lg" label="Large" placeholder="lg" />5<x-bt-textarea xl name="size-xl" label="Extra Large" placeholder="xl" />Colors
Colors affect the border, focus ring, background (dark mode), text, and label color.
1<x-bt-textarea name="color-primary" label="Primary (default)" placeholder="Type..." />2<x-bt-textarea blue name="color-blue" label="Blue" placeholder="Type..." />3<x-bt-textarea red name="color-red" label="Red" placeholder="Type..." />4<x-bt-textarea green name="color-green" label="Green" placeholder="Type..." />5<x-bt-textarea purple name="color-purple" label="Purple" placeholder="Type..." />All available colors
primary (default), beartropy, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, gray, zinc, neutral, stone.
Use the color prop for dynamic values: <x-bt-textarea :color="$dynamicColor" />.
Disabled, Readonly & Required
1<x-bt-textarea name="state-disabled" label="Disabled" :disabled="true" placeholder="Cannot type here" />2<x-bt-textarea name="state-readonly" label="Readonly" :readonly="true">This content is read-only.</x-bt-textarea>3<x-bt-textarea name="state-required" label="Required Field" :required="true" placeholder="This field is required" />Validation Errors
Errors are automatically detected from the Laravel validation error bag. The border turns red and the label switches to the error color.
Auto Validation
Submit without writing enough text to see the validation error.
1<x-bt-textarea id="textarea-bio" wire:model="validatedBio" label="Bio" placeholder="Write at least 10 characters..." />2<x-bt-button wire:click="submitBio" solid blue class="mt-3">Submit</x-bt-button>Custom Error
Description is required
1<x-bt-textarea name="custom-error-textarea" label="Description" :custom-error="'Description is required'" />Help Text
Maximum 500 characters
Required field
1<x-bt-textarea name="help-textarea" label="Notes" help="Maximum 500 characters" />2<x-bt-textarea name="hint-textarea" label="Notes" hint="Required field" />Livewire Integration
Deferred Binding
1<x-bt-textarea id="textarea-description" wire:model="description" label="Description" placeholder="Enter a description..." />Live Binding
Use wire:model.live to update the Livewire property on each keystroke.
Character count: 0
1<x-bt-textarea id="textarea-live-notes" wire:model.live="liveNotes" label="Live Notes" placeholder="Type to see live updates..." />2<p class="text-sm text-gray-500 mt-2">Character count: <strong>{{ strlen($liveNotes ?? '') }}</strong></p>Real-World Example
A feedback form combining textarea with auto-resize, character limit, and validation.
Minimum 10 characters, maximum 500.
1<div class="max-w-md space-y-4"> 2 <x-bt-textarea 3 id="textarea-feedback" 4 wire:model="validatedBio" 5 label="Your Feedback" 6 :auto-resize="true" 7 :max-length="500" 8 :required="true" 9 placeholder="Tell us what you think..."10 help="Minimum 10 characters, maximum 500."11 />12 <x-bt-button wire:click="submitBio" solid blue class="w-full">Send Feedback</x-bt-button>13</div>Slots
| Slot | Description |
|---|---|
default
|
Initial textarea content/value. Also respects
old() for form repopulation.
|
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label
|
string|null
|
null
|
Label text above the textarea. When
required is true, a red asterisk is shown.
|
placeholder
|
string
|
''
|
Placeholder text shown when the textarea is empty.
|
rows
|
int
|
4
|
Number of visible text rows. Defines minimum height when
auto-resize is enabled.
|
cols
|
int|null
|
null
|
Number of visible text columns. Usually not needed with Tailwind width utilities.
|
name
|
string|null
|
null
|
Name attribute for the textarea. Falls back to the
id.
|
id
|
string|null
|
auto-generated
|
Element ID. Defaults to
name if set, otherwise textarea-{uniqid}.
|
color
|
string|null
|
primary
|
Color preset name. Affects border, focus ring, background, text, and label color.
|
size
|
string|null
|
md
|
Size preset:
xs, sm, md, lg, xl.
|
disabled
|
bool
|
false
|
Disable the textarea, preventing input.
|
readonly
|
bool
|
false
|
Make the textarea read-only. The user can scroll and select but not modify content.
|
required
|
bool
|
false
|
Add the HTML
required attribute and show a red asterisk on the label.
|
help
|
string|null
|
null
|
Help text below the textarea.
|
hint
|
string|null
|
null
|
Alias for
help.
|
customError
|
mixed
|
null
|
Custom error message that bypasses the validation error bag.
|
autoResize
|
bool
|
false
|
Auto-grow the textarea height to fit content. Disables manual resize.
|
resize
|
string|null
|
y
|
CSS resize behavior:
none, x, y, both. Forced to none when autoResize is enabled.
|
showCounter
|
bool
|
true
|
Show character count in the bottom-right corner. Displays
count / max when maxLength is set, with red styling at the limit.
|
maxLength
|
int|null
|
null
|
Maximum character length. Enforced via the native
maxlength attribute and reflected in the counter.
|
showCopyButton
|
bool
|
true
|
Show a copy-to-clipboard button in the top-right corner. Shows a checkmark for 1.6 seconds after copying.
|