Logo Beartropy UI
Textarea
The x-bt-textarea component is a flexible, feature-rich multiline input.
It supports labels, validation states, character counter, copy button,
optional auto-resize, and full compatibility with wire:model (Livewire).

Basic Usage

A simple textarea with label and placeholder.
It uses the textarea presets for colors, borders, and spacing.

0 
1<x-bt-textarea
2    label="Description"
3    placeholder="Write something here..."
4/>

Character Counter

Enable the character counter to display the current length, and optionally
set a max-length to highlight when the user reaches the limit.

0 / 160 
1<x-bt-textarea
2    label="Short bio"
3    placeholder="Tell us a bit about yourself..."
4    :max-length="160"
5    :show-counter="true"
6/>

Auto-resize

When auto-resize is enabled, the textarea grows vertically as you type,
without showing resize handles. The height is recalculated on every input event. 

1<x-bt-textarea
2    label="Notes"
3    placeholder="This textarea grows as you type..."
4    :auto-resize="true"
5    :show-counter="false"
6/>

Manual Resize Handles

You can control the resize behavior manually with the resize prop:
none, x, y, or both.
If auto-resize is enabled, resizing is disabled regardless of this prop.

0 
1<x-bt-textarea
2    label="Resizable textarea"
3    placeholder="You can resize me horizontally and vertically"
4    resize="both"   {{-- 'both', 'x', 'y', or 'none' --}}
5/>

Livewire Integration

The textarea works seamlessly with Livewire via wire:model or wire:model.defer.
Validation errors are detected through the standard error bag and shown below the field.

0 / 500 
1<x-bt-textarea
2    label="Comment"
3    placeholder="Leave your comment here..."
4    wire:model="comment"
5    :max-length="500"
6    :show-counter="true"
7/>

Props

Prop Type Default Description
label
string|null null
Optional label displayed above the textarea. If provided and required is true, a red asterisk is shown next to it.
placeholder
string ''
Placeholder text shown when the textarea is empty.
rows
int 4
Initial number of visible text rows. When auto-resize is enabled, this defines the minimum height.
cols
int|null null
Optional cols attribute for the native textarea. Usually not needed when using Tailwind width utilities.
name
string|null null
Name attribute for the textarea. If omitted, it falls back to the generated or provided id.
id
string|null auto-generated
Element ID used to link the label with the textarea. If not provided, an ID like textarea-xxxx is generated automatically.
color
string|null null
Optional color preset key for the textarea, resolved through the textarea presets. Controls label color, border colors, background, focus ring, etc.
disabled
bool false
Disables the textarea, preventing input and applying disabled styling.
readonly
bool false
Makes the textarea read-only: the user can scroll and select text but cannot modify it.
required
bool false
Adds the required attribute for HTML5 validation, and optionally displays a * marker next to the label.
help
string|null null
Helper text displayed below the textarea via the field-help component.
customError
string|null null
Custom error message to force the error state even without a validation error.
When present, it is displayed below the textarea and the border switches to the error color.
autoResize
bool false
When true, the textarea automatically grows vertically as the user types.
The height is recalculated on each input event, and native resize handles are disabled.
resize
string|null null
Controls the CSS resize behavior when autoResize is disabled.
Accepted values:
  • none → resize-none
  • x → resize-x
  • y → resize-y (default when both resize is null and autoResize is false)
  • both → resize in both directions
showCounter
bool true
Shows a character counter in the bottom-right corner of the textarea container.
When maxLength is set, the counter switches to error color when the limit is reached.
maxLength
int|null null
Maximum allowed number of characters. The value is applied as the native maxlength attribute and used by the counter to display current / max.
showCopyButton
bool true
Shows a small copy button in the top-right corner of the field.
Clicking it copies the full textarea content to the clipboard and briefly displays a success icon.
wire:model
Livewire binding null
The component accepts all standard Livewire bindings via {{ $attributes }}.
Use wire:model, wire:model.defer, etc. to bind the textarea value to a Livewire property. Validation errors are picked up automatically via the shared error state helper.
Code highlighting provided by Torchlight