default
Design Systemv1.0COMPONENTS · TEXT INPUT
DESCRIPTION
A text input is a form control that allows users to enter and edit a single line of text.
PLAYGROUND MODE
The input field is a key part of forms and user interactions. It lets users enter text, numbers, or make selections, making it an essential tool for gathering information.
SIX SUPPORTED STATES
Every state keeps the same anatomy — label, optional icons, value — and communicates purely through border, background tint, and text color. Leading icon, trailing icon, the info glyph, and the hint line are independent, opt-in slots — a field can carry any combination of them, including none.
ICON SLOTS
Each icon slot is a boolean show/hide — matching the Figma instance-swap property. A field with no icons at all is just as valid as one with both.
SIZE
TOKENS & TYPOGRAPHY
COMPONENT STRUCTURE