Input
Input collects one line of text, a number or a password, with a label, a hint and an error.
Preview
Text Input, type Default, state Placeholder. The field is underlined, not boxed: no fill, no radius, one rule on the bottom edge. Type in it.
Type
Three types. Default is a plain field. Left and Right Selection put a picker on one side of a 32px divider, for a dialling code or a currency.
State
Five states. Only the rule and the text move, so the box never changes height and a form does not jump on error. Focused adds a clear button before the trailing icon.
Chip Input
The same underlined field with a tag icon, for entries that become tokens. Padding drops to 8 so a row of chips sits on the rule rather than above it.
Counter Input
The one input in the set that is not underlined. A pill with a full border and two 32px buttons, for a quantity you nudge rather than type. The buttons work.
Digit Input
One cell per digit, for a code that arrives by SMS. 80px cells at radius 18, set at 24/32 Semi Bold so the number reads at arm's length.
Properties
The Text Input set. Chip, Counter and Digit are their own sets and drop the properties they have no use for.
Text Input 15 variants, Chip Input 5, Counter Input 5, Digit Input 5. Left Selection ships the United States flag beside a +1 dial code. It read +358, which is Finland, until the code was corrected in the Figma file on 7 Sep 2026 to match the flag.
Tokens
Every value the input reads, resolved through its aliases to the primitive underneath.
Guidelines
Keep the hint slot filled from the start and swap its text on error. The field never changes height, so the form does not jump.
Do not signal the error with the red rule alone. Colour is not a message, and the rule is the only thing a colour blind user cannot read.
Text Area
The same underlined field, four lines deep, with a counter in the hint row. The box is fixed: a long answer scrolls inside it instead of pushing the rest of the form down the screen. Type in it.
Five states, one set. Only the rule and the text colour move, so the box never changes height and a form does not jump when a field goes red.
Stepper
Two buttons and a number, for a value you change by one. No field and no label: the stepper sits in a row that already says what it counts. The buttons work.
Six variants: two sizes by three states. Min and Max are not a disabled stepper. Only the button that would cross the bound goes flat, so the other one still reads as live.
Six sets share one Figma page. This table is the Text Input set, then the properties the other five add. Chip, Counter and Digit drop the ones they have no use for.
Text Input 15 variants, Text Area 5, Chip Input 5, Counter Input 5, Digit Input 5, Stepper 6. Left Selection ships the United States flag beside a +1 dial code. It read +358, which is Finland, until the code was corrected in the Figma file on 7 Sep 2026 to match the flag.