Textarea

Use Textarea for form text fields. By default, the Textarea will grow to contain the text entered by the user.

Example

Type in the field to see the value change.

<script>
  import { Textarea } from '$lib/ui'
  let message = $state('');
</script>

<Textarea bind:value={message} />

<p>Message: {message}</p>

Message:

Label

Label for the textarea element.

<Textarea label="Message" />

Name

Name of the textarea for form submission.

<Textarea name="message" label="Message" />

Height

Use height to set the initial height of the textarea. If using CSS utility classes (like Tailwind), you can also set the height with something like class="!h-48" (using the Tailwind ! important flag to override default style).

<Textarea height="10rem" />

Placeholder

A placeholder prop let’s you define a simple String to be used as a simple descriptor for the input value.

<Textarea placeholder="Jane Doe" />

Disabled

Default is true but can also be assigned a Boolean value like disabled={user.isSpammable}.

<Textarea label="Name" disabled />

Fixed

Use fixed to disable the auto-expanding feature and show regular scrollbars as necessary.

<Textarea fixed />

Error

Display error message below the field. Also adds error styles.

<Textarea error="Must be at least 40 million characters" />

Note

A note prop let’s you define a note displayed below the field.

<Textarea note="This is a note" />

Textarea Component Props

Textarea CSS Custom Properties