Input

Updated 2026-05-14

Overview Content Accessibility Code

Confidence anatomy medium variants medium motion high a11y high content high

Overview

Used for single-line alphanumeric data entry (e.g., Name, Email, Phone). Specify the “type” attribute if applicable.

Anatomy

Anatomy diagram coming from Figma

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

States
Default
Hovered
Focused
Active
Filled
Error
Disabled
Read-only

Motion

State Transitions

Slug: state-transitions

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

Resources

• Open in Figma
• Knowledge source