Input
A single-line text field with a label above it and room for an icon, a hint and an error. The base of every other text-entry control in the system.
Preview
We will only use this to send receipts.
When to use
- For short free text: a name, an email, a search, a URL.
- With a leading icon when it helps recognise the field at a glance, like search or email.
Reach for something else
- For more than a line of text: that is a Text Area.
- For picking from a known list: that is a Dropdown.
Anatomy
- 1
Label
Above the field, naming what goes in it.
- 2
Field
The bordered box; the whole of it takes the click.
- 3
Leading icon
Optional, 20px, in the muted text colour.
- 4
Placeholder
An example value, never a replacement for the label.
- 5
Hint
Optional line under the field for help or errors.
States
Default
Hairline border.
Hover
Border one step darker.
Focus
Brand border with a soft ring.
Error
Red border, with the error in the hint.
Disabled
Grey fill, muted text, inert.
Accessibility
- A native <input> with a <label> tied to it by for and id.
- The type matches the content — email, url, tel, search — so devices bring up the right keyboard.
- Hints and errors are linked with aria-describedby; errors also set aria-invalid.
- Placeholder text is never the only label: it disappears as soon as people type.
Source
The Input is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block