Textarea

Capture multi-line text input from users. Ideal for comments, descriptions, and feedback.

Comment

Required

Max content 255 char.

Comment is required.

<x-textarea wire:model="comment" label="Comment" description="Max content 255 char." placeholder="Write your comment here." required/>

Longhand

Zinc UI makes it easy to wrap your textarea in a field with label/description and error messages. If you need more control over the layout of these fields, you can assemble the individual field components.

<x-field>
    <x-label badge="Required">Comment</x-label>
 
    <x-description>Max content 255 char.</x-description>
 
    <x-textarea wire:model="comment" placeholder="Write your comment here." required />
 
    <x-error name="comment" />
</x-field>

Variants

Use the


    variant

prop to change the visual style of the input. The default value is


    outline

<x-textarea variant="outline" />
<x-textarea variant="filled" />

Rows

Use the


    rows

prop to change the row of the textarea. The default value is

<x-textarea rows="4" />
<x-textarea rows="5" />

Resizes

Use the


    resize

prop to change the resize behavior of the textarea. The default value is


    auto

Auto

None

Vertical

Horizontal

Both

<x-textarea resize="auto" />
<x-textarea resize="none" />
<x-textarea resize="vertical" />
<x-textarea resize="horizontal" />
<x-textarea resize="both" />