Forms

Textarea

A multi-line text input with autoresize, icons, variants, colors, sizes, and loading states.

Playground

Experiment with different props in real-time.

Variant

Color

Size

Disabled

Highlight

Autoresize

Basic Usage

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

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

Variants

5 visual styles.

<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

<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 leading/trailing icons.

<!-- 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

Auto-adjust height based on content. Use maxrows to limit.

<!-- 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

Set initial visible rows.

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

Highlight

<Textarea highlight placeholder="Highlighted textarea" />

Loading & Disabled

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

UI Slots

Use the ui prop to override classes on internal elements.

Slot	Description
`root`	`Outermost wrapper`
`base`	`Textarea element`
`leading`	`Leading content wrapper`
`leadingIcon`	`Leading icon`
`trailing`	`Trailing content wrapper`
`trailingIcon`	`Trailing icon`

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

Snippets

Snippet	Description
`leadingSlot`	`Custom content before textarea`
`trailingSlot`	`Custom content after textarea`

Props

Prop	Type	Default	Description
`value`	`string`	`-`	`Textarea value (bindable)`
`variant`	`'outline' \| 'soft' \| 'subtle' \| 'ghost' \| 'none'`	`'outline'`	`Visual style`
`color`	`ColorType`	`'primary'`	`Color scheme`
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	`Dimensions`
`rows`	`number`	`3`	`Visible text lines`
`autoresize`	`boolean`	`false`	`Auto-adjust height`
`maxrows`	`number`	`0`	`Max rows when autoresizing (0 = unlimited)`
`highlight`	`boolean`	`false`	`Show colored ring`
`loading`	`boolean`	`false`	`Show loading spinner`
`icon`	`string`	`-`	`Icon (position via trailing prop)`
`leadingIcon`	`string`	`-`	`Icon before textarea`
`trailingIcon`	`string`	`-`	`Icon after textarea`
`trailing`	`boolean`	`false`	`Move icon to trailing side`
`disabled`	`boolean`	`false`	`Disable textarea`
`placeholder`	`string`	`-`	`Placeholder text`
`ref`	`HTMLTextAreaElement \| null`	`-`	`Bindable reference`
`class`	`string`	`-`	`Additional CSS classes`
`ui`	`Record<Slot, Class>`	`-`	`Override slot classes`

Switch FileUpload