Skip to content

Rich text

Updated 2026-05-19

Confidence anatomy medium variants medium motion high a11y high content low

A multi-line input field that allows for text formatting (bold, links, lists). Use for long-form content like descriptions or comments.

Anatomy

  1. 1
    Label
    caller-supplied text bound to the control via for/aria-labelledby
  2. 2
    Required indicator
    visible asterisk; aria-required carries the semantics
  3. 3
    Control
    the input/select/checkbox/radio/toggle element
  4. 4
    Helper text
    optional persistent guidance below the control
  5. 5
    Validation message
    error/warning/success; replaces helper text when active
  6. 6
    Leading icon (optional)
    decorative or semantic hint inside the control
  7. 7
    Trailing icon (optional)
    often interactive — clear, reveal, dropdown caret

Variants

State
Expanded
Default

Motion

State Transitions

Slug: state-transitions

focus-ring fade-in on focus; opacity transition on disabled