sheengemologic ui
All components

Textarea

A labeled native multiline input with optional frame-batched autosizing.@gemologic/sheen · forms

Playground

Shared with the team.
<Textarea label="Notes" rows={3} autoResize description="Shared with the team."  autoResize={false}/>

Variant matrix

Growing notes
Shared with the team.

Anatomy

Package
@gemologic/sheen
Source
packages/ui/src/primitives/Textarea.tsx
Tokens
  • --sheen-color-bg-inset
  • --sheen-color-border-control
  • --sheen-text-ui-leading
  • --sheen-space-block-xs

Accessibility

Role: multiline textboxKeyboard: Native multiline text editing, Enter inserts a newline, Tab follows native focus order

Do

  • Reserve realistic rows on the server. Font-dependent measurement happens after hydration without replacing the control.
  • Use max-block-size to cap growth; excess content remains scrollable.

Do not

  • Do not autosubmit on Enter or discard drafts during background refresh.
  • Do not animate height while typing or set a competing inline block-size during autosizing.

Generated props

NameTypeDefaultDescription
label *string—Required visible label.
descriptionstring—Instructions associated with the textarea.
errorstring—App-owned validation message, associated with the invalid textarea.
autoResizebooleanfalseMeasure content after mount and grow or shrink on input, value, width, font, or theme changes. Owns inline block-size while enabled; use min/max-block-size constraints. Rows reserves initial server geometry.
Native Solid/HTML attributes remain available and are omitted from this authored-prop view.