Flint Components
Input
Inputs take a short line of text. In Flint, an input always lives in a form field with a visible label, optional helper text and an error message.
Example
Light
Shown on your trip card.
Enter a number from 1 to 14.
Dark
Shown on your trip card.
Enter a number from 1 to 14.
When to use
- Use an input for short, free text: names, numbers, codes.
- Use a select or radio buttons when the answer comes from a short, known list.
Variants and states
| Variant or state | Use |
|---|---|
| Default | Empty, with a visible label above it. |
| Filled | Holds a value. |
| Error | The value has a problem. The edge turns red and the message replaces the helper text. |
| Disabled | Can't be edited right now. |
Guidance
Keep a visible label above every input.
Use placeholder text as the label. It disappears when people start typing.
Say what went wrong and how to fix it: "Enter a number from 1 to 14."
Write "Invalid input" and leave people to guess.
On submit, move focus to the first field with an error.
Show errors only at the top of the page, far from the fields.