Textarea

Multiline field with a spring caret and its own themed scroll area.

Usage

svelte

<script lang="ts">
  import { Textarea } from "@milandekruijf/ui/svelte";

  let value = $state("");
</script>

<Textarea bind:value rows={5} placeholder="Write a message…" />

Examples

Multiline field

<script lang="ts">
  import { css } from "@milandekruijf/pandacss/css";
  import { Textarea } from "@milandekruijf/ui/svelte";

  let value = $state("");

  const wrapClass = css({ maxW: "28rem", minW: 0 });
</script>

<div class={wrapClass}>
  <Textarea bind:value rows={5} placeholder="Write a message…" />
</div>

Props

Prop	Type	Default	Description
value?	`string`	""	Bindable editor text (`bind:value`).
rows?	`number`	6	Approximate visible line count before scrolling.
placeholder?	`string`	—	Shown while the editor is empty.
name?	`string`	—	Form field name.
form?	`string`	—	Associates the editor with a form by id.
required?	`boolean`	false	Marks the field as required.
disabled?	`boolean`	false	Disables the editor.
readonly?	`boolean`	false	Keeps the text selectable but not editable.
autofocus?	`boolean`	false	Focuses the editor on mount.
onValueChange?	`(value: string) => void`	—	Fires after the value syncs from the editor (for form libraries).
class?	`string`	—	Extra classes merged after the field styles.

Remaining native attributes are forwarded to the editor surface.