shilp-sutra
ui · Primitive

Textarea

@devalok/shilp-sutra/ui/textareaView in Storybook
Live preview coming

Hand-curated previews ship in rolling waves. See it live in Storybook →

Reference

Props

size: "xs" | "sm" | "md" | "lg"
state: "default" | "error" | "warning" | "success"
(plus standard textarea attributes except native "size")

Defaults

size: "md"

Example

<Textarea size="lg" state="error" placeholder="Describe the issue..." />

Composability

  • FormField auto-consumption: Same pattern as Input — inside <FormField>, Textarea inherits state, aria-describedby, aria-invalid, aria-required. Explicit props override.
  • Resize: Vertically resizable by default (resize-y); override with className="resize-none" if needed.
  • Label pairing: Manual — <Label htmlFor="x" /> + <Textarea id="x" />. FormField doesn't auto-wire.
  • No IconProvider cascade (no icon slots — different from Input).

Gotchas

  • state="error" sets aria-invalid automatically; all sizes are vertically resizable
  • Inside FormField: auto-inherits state, aria-describedby, aria-required from context (explicit props override)

Changes

v0.15.0

  • Changed lg size font changed from text-ds-lg (18px) to text-ds-md (14px) — all input sizes now use 14px for consistency
  • Changed md size font standardized to text-ds-md (14px)

v0.8.0

  • Fixed Now consumes FormField context automatically (aria-describedby, aria-invalid, aria-required)

v0.4.2

  • Added textareaVariants export

v0.1.1

  • Fixed Added aria-invalid for error state (matching Input pattern)

v0.1.0

  • Added Initial release