Skip to content Skip to footer navigation
Light theme Dark theme
You are reading the Statamic 6 Alpha docs. 👀

Textarea

Simple multi-line text input.

<ui-textarea label="Message" />

Disabled#

Prevent users from interacting with the textarea by disabling it.

<ui-textarea disabled text="Can't touch this." label="Lyrics" />

Elastic#

Allow the textarea to adjust its size based on the content.

<ui-textarea elastic rows="2" text="If you catch a chinchilla in Chile, and cut off its beard willy-nilly, you can honestly say, you made on that day, a Chilean chinchilla's chin chilly.">

Fixed Height#

Set the height of the textarea by passing the rows prop.

<ui-textarea rows="2" label="Description" />

Placeholder#

Add a placeholder to the textarea.

<ui-textarea placeholder="Dear diary..." label="Message" />

Resize Controls#

If you want to restrict the user from resizing the textarea, you can use the resize="none" prop.

<ui-textarea resize="vertical" rows="1" placeholder="Resize vertical"/>

<ui-textarea resize="both" rows="1" placeholder="Resize both"/>

<ui-textarea resize="horizontal" rows="1" placeholder="Resize horizontal"/>

<ui-textarea resize="none" rows="1" placeholder="Resize none"/>