Rich text
Updated 2026-05-19
Confidence anatomy medium variants medium motion high a11y high content low
Overview
Section titled “Overview”A multi-line input field that allows for text formatting (bold, links, lists). Use for long-form content like descriptions or comments.
Anatomy
- 1 Labelcaller-supplied text bound to the control via for/aria-labelledby
- 2 Required indicatorvisible asterisk; aria-required carries the semantics
- 3 Controlthe input/select/checkbox/radio/toggle element
- 4 Helper textoptional persistent guidance below the control
- 5 Validation messageerror/warning/success; replaces helper text when active
- 6 Leading icon (optional)decorative or semantic hint inside the control
- 7 Trailing icon (optional)often interactive — clear, reveal, dropdown caret
Variants
| State |
|---|
Expanded |
Default |
Motion
State Transitions
focus-ring fade-in on focus; opacity transition on disabled