Aliases
multiline input
Textarea
Multiline input with labels, guidance, and errors.
Playground
md multiline field
Overview
- Use multiline input for notes, summaries, and other text that can contain line breaks.
Foundations
When to use
- Use
Textareafor text that contains line breaks. - Use guidance for input requirements and errors for validation failures.
When not to use
- Do not use
Textareafor single-line identifiers or short values. - Do not turn it into an auto-growing editor.
Structural parts
field wrapper
root Carries label, helper text, and validation messaging.
field label
label Names the content being collected.
native textarea
control Multiline text entry area.
Public interface
| Name | Type | Default | Description |
|---|---|---|---|
label | string | — | Visible label used for the field or control. |
description | string | — | Provides field guidance associated with the control. |
error | string | — | Shows a validation error associated with the control. |
placeholder | string | — | Placeholder text shown before a user makes a selection or enters text. |
required | boolean | false | Marks the control as required. |
disabled | boolean | false | Prevents interaction and exposes the disabled state. |
name | string | — | Form field name used for native form submission. |
id | string | — | Sets the control ID for external labels and descriptions. |
size | 'sm' | 'md' | 'lg' | 'md' | Sets the component size. |
value | string | — | Controlled textarea value. |
rows | number | 4 | Visible line count for the textarea. |
resize | 'none' | 'vertical' | 'both' | 'vertical' | Controls user resizing when enabled by the browser. |
onChange | (detail: { value: string }) => void | — | Runs when the value changes. |
theme | ThemeContract | — | Sets the theme used to resolve component styles. |
| Name | Payload | Description |
|---|---|---|
change | { value: string } | Fires with the text value. |
| Name | Description |
|---|---|
default | Textarea is prop-driven and does not expose content slots. |
Variants, sizes, and states
Variants
default:Textareauses one multiline shell and varies mainly by size and rows.
Sizes
sm: Compact multiline field.md: Default multiline field.lg: Larger multiline field for spacious layouts.
States
rest: Default multiline shell.focus-visible: Focused state with visible keyboard treatment.invalid: Validation state with error copy.disabled: Semantically disabled and visibly muted.
Accessibility
Semantics
- Associates the control with its visible label, description, and error.
- Exposes disabled and required semantics through the underlying form control.
Keyboard
- Supports native focus and text entry behavior.
- Supports native multiline editing, selection, and navigation behavior.
Screen readers
- Connects visible label, helper text, and error text to the native control.
Checklist
- Verify that the control has an accessible name.
- Verify that keyboard focus is visible in every state and size.
- Identify disabled, selected, and error states with text or symbols as well as color.
Tokens and CSS variables
root
- --dk-field-stack-gap
- 0.45rem
label
- --dk-field-label-color
- #16181c
- --dk-field-label-size
- clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)
- --dk-field-label-weight
- 600
field
- --dk-textarea-bg
- #f2f5fb
- --dk-textarea-fg
- #16181c
- --dk-textarea-border
- #95989d
- --dk-textarea-border-width
- 1px
- --dk-textarea-radius
- clamp(0.75rem, 0.6875rem + 0.278vw, 0.938rem)
- --dk-textarea-block-size
- 136px
- --dk-textarea-inline-padding
- clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)
- --dk-textarea-block-padding
- clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)
- --dk-textarea-font-size
- clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)
- --dk-textarea-placeholder
- #95989d
- --dk-textarea-shadow
- none
- --dk-textarea-focus-ring-color
- #2072e4
- --dk-textarea-motion-duration
- 200ms
description
- --dk-field-description-color
- #16181c
- --dk-field-description-size
- 0.8125rem
error
- --dk-field-error-color
- #cc272e
- --dk-field-error-size
- 0.8125rem
Implementation notes
Textareauses a fixed row count and does not grow automatically.
Examples
Starter
Summary field
A labeled multiline field for short summaries.
<Textarea label="Summary" description="Share the launch highlights." placeholder="Type the short summary." rows={4} />Common patterns
Compact multiline field
Smaller size works well in inspector-style tools.
<Textarea size="sm" label="Internal note" rows={3} />Edge cases
Required narrative input
Use explicit error copy when the narrative field is mandatory.
<Textarea label="Summary" error="Add a short summary before publishing." rows={5} />Mathematical fixtures
Calculated fixtures; browser evidence is not collected. Layout estimates use declared text behavior and maximum token values.
default (size=sm)
passsize=sm
- Evidence: mathematical
- Coverage: complete (4 / 4 declared kinds evaluated)
- Declared: contrast, target, layout, helperText
- Evaluated: contrast, target, layout, helperText
- Contrast: 98.5 Lc
- Target: 44 px
- Layout: field · single-line 513 px single-line estimate; 513 px minimum width 260 px: pass 340 px: pass 440 px: pass
- Helper: 2/2
default (size=md)
passsize=md
- Evidence: mathematical
- Coverage: complete (4 / 4 declared kinds evaluated)
- Declared: contrast, target, layout, helperText
- Evaluated: contrast, target, layout, helperText
- Contrast: 98.5 Lc
- Target: 44 px
- Layout: field · single-line 666 px single-line estimate; 666 px minimum width 260 px: pass 340 px: pass 440 px: pass
- Helper: 2/2
default (size=lg)
passsize=lg
- Evidence: mathematical
- Coverage: complete (4 / 4 declared kinds evaluated)
- Declared: contrast, target, layout, helperText
- Evaluated: contrast, target, layout, helperText
- Contrast: 98.5 Lc
- Target: 44 px
- Layout: field · single-line 887 px single-line estimate; 887 px minimum width 260 px: pass 340 px: pass 440 px: pass
- Helper: 2/2
invalid (size=sm)
passsize=sm
- Evidence: mathematical
- Coverage: complete (4 / 4 declared kinds evaluated)
- Declared: contrast, target, layout, helperText
- Evaluated: contrast, target, layout, helperText
- Contrast: 98.5 Lc
- Target: 44 px
- Layout: field · single-line 513 px single-line estimate; 513 px minimum width 260 px: pass 340 px: pass 440 px: pass
- Helper: 2/2
invalid (size=md)
passsize=md
- Evidence: mathematical
- Coverage: complete (4 / 4 declared kinds evaluated)
- Declared: contrast, target, layout, helperText
- Evaluated: contrast, target, layout, helperText
- Contrast: 98.5 Lc
- Target: 44 px
- Layout: field · single-line 666 px single-line estimate; 666 px minimum width 260 px: pass 340 px: pass 440 px: pass
- Helper: 2/2
invalid (size=lg)
passsize=lg
- Evidence: mathematical
- Coverage: complete (4 / 4 declared kinds evaluated)
- Declared: contrast, target, layout, helperText
- Evaluated: contrast, target, layout, helperText
- Contrast: 98.5 Lc
- Target: 44 px
- Layout: field · single-line 887 px single-line estimate; 887 px minimum width 260 px: pass 340 px: pass 440 px: pass
- Helper: 2/2