Textarea

Multi-line input.

Matches Input's border, ring and invalid styling, and adds the one thing a bare <textarea> makes awkward: growing with its content instead of stranding the user in a three-line window.

Forms · two-way: bind:value

<script lang="ts">
	import { Textarea } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
class	string	—	Merged with the component's own classes, last — so yours win.
value bind:	string	''	The field's text.
autosize	boolean	false	Grow with the content, up to maxRows.
rows	number	3	Starting height, in rows.
maxRows	number	12	Stop growing here and scroll instead.

Everything not listed above is spread onto the underlying element (HTMLTextareaAttributes): aria-*, data-*, event handlers, and the rest of the native attributes.

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<Textarea value={'Skip anything under /volume1/private.\nKeep the last 7 snapshots.'} rows={3} />

Forms · Field · Input · FileInput · FileList · CodeEditor · Combobox · RadioGroup · NumberInput · InlineEdit · Label · Select · MultiSelect · DatePicker · TagsInput · Checkbox · Switch · Slider

---

← All components · Getting started · Theming · source