Textarea
A multi-line text field. It is for long entries such as notes, addresses and descriptions; label, hint, floating label and error behavior are the same as acun:input.
Basic usage
The height is given with rows as a number of lines; the default is 4. The field name and id are derived from wire:model; attributes such as placeholder go straight to the <textarea>.
<acun:textarea wire:model="note" label="Note" rows="3" placeholder="Note for the warehouse team" />| Prop | Values |
|---|---|
rows | Number of lines; default 4 |
Initial text
In forms that do not use Livewire, write the field's initial value in the slot. For fields bound with wire:model, the value comes from the Livewire property.
<acun:textarea name="address" label="Address" rows="3">No. 4, 12th Street, Cumhuriyet Neighborhood, Kadıköy</acun:textarea>Floating label
variant="floating" places the label on the first line of the field; when the field is focused or filled, it shrinks up to the top edge. In this variant the field can be resized vertically.
<acun:textarea wire:model="description" variant="floating" label="Description" rows="3" />| Prop | Values |
|---|---|
variant | default | floating |
Hint and validation error
hint shows help text below; if there is an error for the field's name, the border turns red, the message replaces the hint and the field gets aria-invalid="true". The hint or error message is linked to the field with aria-describedby (id: the field id + -message); your own aria-describedby value is kept. required puts an asterisk next to the label.
<div class="space-y-4">
<acun:textarea wire:model="note" label="Note" rows="3" hint="The courier sees this note during delivery." />
<acun:textarea wire:model="rejection_reason" label="Rejection reason" rows="3" required>Missing</acun:textarea>
</div>| Prop | Values |
|---|---|
hint | Help text below |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
label | null | Label; * is added next to it when the required attribute is present |
name | null | Field name; defaults to the wire:model value |
rows | 4 | Number of lines |
variant | default | default · floating |
hint | null | Help text below while there is no error; linked to the field with aria-describedby |
(attributes) | — | placeholder, required, disabled, readonly, id … go straight to the <textarea> element; disabled gives a gray background and text, readonly a gray background (disabled is faded with a floating label) |