Textarea

Multiline twin of Input with an autosize option.

A multiline text field that mirrors `Input`’s anatomy — label with auto-wired id, `hint`/`error` helper text (error implies aria-invalid and is announced), readonly/disabled styling, and native attribute forwarding — so the two sit side by side in a form without visual drift. Adds `rows` for the minimum height and an `autosize` mode that grows with content (`field-sizing: content` where supported, a scrollHeight fallback elsewhere) capped by `maxRows`.

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

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

<Textarea
  label="message"
  bind:value={message}
  placeholder="Say something nice…"
  hint="Markdown is fine."
  autosize
  maxRows={8}
/>

Shares `Input`’s field tokens (`--ss-input-*`) and focus/error treatment. The label is auto-associated even without an explicit `id`; `aria-describedby` orders error, then hint, then any caller-supplied ids, and the error is announced via `role="alert"`. Without `autosize` the field is manually resizable (vertical only); with it, resizing is handled by the content.

HTML

interactive with vanilla.js The exact markup the component renders, generated at build time. Use it with dssoca/vanilla.css+ dssoca/vanilla.js — see Plain HTML & CSS.

html

<div class="ss-textarea">
  <label class="lbl" for="notes">Notes</label>
  <div class="control">
    <textarea class="field autosize" id="notes" placeholder="" rows="2" style="max-height: calc(10 * 1lh + 2 * var(--ss-input-py));"></textarea>
  </div>
</div>

Grows with content via CSS field-sizing; vanilla.js adds a scrollHeight fallback where unsupported.

Props

Prop	Type	Default	Description
`label`	`string`	—	Visible label (associated via generated id).
`value`	`string`	`''`	Bindable value.
`placeholder`	`string`	—	Placeholder text.
`rows`	`number`	`3`	Visible rows; the minimum height (also while autosizing).
`autosize`	`boolean`	`false`	Grow with content (`field-sizing: content`, JS fallback); disables manual resize.
`maxRows`	`number`	`10`	Row cap while autosizing — the field scrolls beyond it.
`required`	`boolean`	`false`	Marks the field required (adds a marker).
`disabled`	`boolean`	`false`	Disable the field.
`readonly`	`boolean`	`false`	Native readonly — value visible but not editable; rendered muted.
`invalid`	`boolean`	—	Apply invalid styling + aria-invalid (also implied by `error`).
`hint`	`string`	—	Helper text rendered under the textarea and wired via aria-describedby.
`error`	`string`	—	Error text under the textarea; implies aria-invalid and is announced to AT.
`describedby`	`string`	—	id(s) of additional describing element(s) (aria-describedby).
`maxlength`	`number`	—	Native maxlength.
`oninput`	`(e) => void`	—	Input handler.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.
`...rest`	`HTMLTextareaAttributes`	—	Any remaining native textarea attributes / handlers are forwarded.