textarea field
TextareaField wraps a native HTML textarea in the shared DS form shell: stacked label, bordered cream-toned bar, muted offset shadow, and lower-case type treatment. It forwards standard textarea attributes to the underlying element, preserves native multiline behavior, and keeps vertical resizing enabled by default for longer-form input.
| field | value |
|---|---|
| group | global |
| import | @arieare/ds |
| source | packages/ds/src/components/textarea-field/TextareaField.tsx packages/ds/src/components/textarea-field/textarea-field.css |
with label
bare — no label
disabled
component tokens
| token | source | description |
|---|---|---|
--textarea-field-bg | @arieare/ds/textarea-field.css | Textarea bar background. Defaults to --control-bg-idle. |
--textarea-field-border | @arieare/ds/textarea-field.css | Textarea bar border color. Defaults to --control-border-idle. |
--textarea-field-shadow | @arieare/ds/textarea-field.css | Textarea bar box-shadow. Defaults to --control-shadow-idle. |
--textarea-field-ink / --textarea-field-placeholder-ink / --textarea-field-label-ink | @arieare/ds/textarea-field.css | Textarea value, placeholder, and label ink colors. |
--textarea-field-min-height / --textarea-field-input-min-height | @arieare/ds/textarea-field.css | Controls the outer bar minimum height and the textarea's internal minimum height. |
--textarea-field-radius / --rds-interact / --p-size-6 / --p-size-8 | @arieare/ds/textarea-field.css + @arieare/ds/tokens.css | Controls the textarea container radius and its shared padding and label gap sizing. |
--type-p-base / --type-p-small / --type-p-base-feature-settings | @arieare/ds/tokens.css | Textarea uses --type-p-base; the label uses --type-p-small with the shared OpenType feature settings. |
props
| prop | type | default | description |
|---|---|---|---|
label | ReactNode | — | Optional label rendered above the textarea bar and linked via htmlFor. |
id | string | — | Textarea id. Auto-generated via React.useId() when omitted; links the label htmlFor. |
className | string | — | Extra class applied to the outer field wrapper. |
placeholder / rows / value / onChange | string / number / string / ChangeEventHandler | — | Core authoring controls for placeholder copy, visible row count, and controlled usage. |
...textarea attributes | TextareaHTMLAttributes<HTMLTextAreaElement> | — | All standard textarea attributes (disabled, required, maxLength, autoComplete, etc.) forwarded to the underlying textarea element. |