Forms

Textarea

Multi-line text input for collecting longer-form content. Supports variants, sizes, icons, autoresize, and loading states.

Playground

Experiment with different props in real-time.

Variant

Color

Size

Disabled

Basic Usage

Import and use the Textarea component with a placeholder prop.

<script lang="ts">
  import { Textarea } from 'sv5ui';
</script>

<Textarea placeholder="Write something..." />

Variants

5 visual styles for different levels of emphasis.

<Textarea variant="outline" placeholder="Outline" />
<Textarea variant="none" placeholder="None" />
<Textarea variant="soft" placeholder="Soft" />
<Textarea variant="subtle" placeholder="Subtle" />
<Textarea variant="ghost" placeholder="Ghost" />

Sizes

5 sizes from extra small to extra large.

<Textarea size="xs" placeholder="Extra Small" />
<Textarea size="sm" placeholder="Small" />
<Textarea size="md" placeholder="Medium" />
<Textarea size="lg" placeholder="Large" />
<Textarea size="xl" placeholder="Extra Large" />

With Icons

Add icons to provide visual context using Iconify names.

<!-- Leading icon -->
<Textarea leadingIcon="lucide:message-square" placeholder="Your message..." />

<!-- Trailing icon -->
<Textarea trailingIcon="lucide:send" placeholder="Type to send..." />

<!-- Both icons -->
<Textarea leadingIcon="lucide:edit-3" trailingIcon="lucide:check" placeholder="Edit note..." />

Autoresize

Automatically grow the textarea height as content is entered. Optionally limit growth with maxrows.

<!-- Auto-grows as you type -->
<Textarea autoresize placeholder="Start typing and I'll grow..." />

<!-- Auto-grows with a max row limit -->
<Textarea autoresize maxrows={6} placeholder="I'll grow up to 6 rows..." />

Custom Rows

Control the initial visible height with the rows prop. Defaults to 3.

<Textarea rows={1} placeholder="1 row" />
<Textarea rows={5} placeholder="5 rows" />
<Textarea rows={8} placeholder="8 rows" />

Loading

Show a loading indicator on the textarea.

<Textarea loading placeholder="Loading..." />

Highlight

Apply a highlight ring to draw attention to the textarea.

<Textarea highlight placeholder="Highlighted textarea" />

Disabled

Prevent user interaction with the textarea.

<Textarea disabled placeholder="Disabled textarea" value="Cannot edit this" />

UI Slots

Use the ui prop to override classes on specific internal elements of the Textarea.

Slot	Description
`root`	Outermost wrapper element — controls overall layout and spacing
`base`	The textarea element itself — controls shape, padding, font, border
`leading`	Leading content wrapper — controls positioning of leading area
`leadingIcon`	Icon before the textarea — controls icon size, color, spacing
`trailing`	Trailing content wrapper — controls positioning of trailing area
`trailingIcon`	Icon after the textarea — controls icon size, color, spacing

<Textarea
  placeholder="Custom styled"
  leadingIcon="lucide:pencil"
  ui={{
    base: 'rounded-xl shadow-lg',
    leading: 'pl-4',
    leadingIcon: 'text-primary'
  }}
/>

Props

Prop	Type	Default	Description
`ref`	`HTMLTextAreaElement`	`-`	Bind to the underlying textarea element
`value`	`string`	`-`	Textarea value (supports bind:value)
`variant`	`'none' \| 'outline' \| 'soft' \| 'subtle' \| 'ghost'`	`'outline'`	Visual style of the textarea
`color`	`Color`	`'primary'`	Color scheme
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Textarea dimensions
`autoresize`	`boolean`	`false`	Auto-grow height as content increases
`rows`	`number`	`3`	Number of visible text rows
`maxrows`	`number`	`0`	Maximum rows when autoresize is enabled (0 = unlimited)
`highlight`	`boolean`	`false`	Apply a highlight ring to the textarea
`loading`	`boolean`	`false`	Show loading indicator
`loadingIcon`	`string`	`icons.loading`	Custom icon for the loading spinner
`disabled`	`boolean`	`false`	Disable the textarea
`icon`	`string`	`-`	Icon (Iconify name) — placed as leading icon
`leadingIcon`	`string`	`-`	Icon before the textarea content
`trailingIcon`	`string`	`-`	Icon after the textarea content
`trailing`	`boolean`	`false`	Place icon on trailing side instead of leading
`placeholder`	`string`	`-`	Placeholder text
`id`	`string`	`-`	HTML id attribute
`name`	`string`	`-`	HTML name attribute for form submission
`leadingSlot`	`Snippet`	`-`	Custom snippet content for leading area
`trailingSlot`	`Snippet`	`-`	Custom snippet content for trailing area
`class`	`string`	`-`	Additional CSS classes
`ui`	`Record<Slot, Class>`	`-`	Override slot classes

Switch Alert