An input field lets the user enter free text, numbers or search terms. It can have a label, a left icon, right-hand action icons and a message that explains or validates the value.
Every example on this page is the real component, not a picture. Type, click, tab and clear the value to try it. Figma: Base Input.
Choose a breakpoint, size and state and the field and its code update. Hover and focus are forced here so they can be seen; type in the field to get the Active state, and use the clear button to empty it.
An input field lets the user enter free text, numbers or search terms. It can have a label, a left icon, right-hand action icons and a message that explains or validates the value.
Input has three sizes on desktop (Large, Small, XSmall) and two on mobile (Large, Small), seven states, and optional clear and action icons.
This documentation has three pages. Examples & Guidelines (this page) shows when and how to use an input field. Specifications holds the values: tokens, sizes, measurements, states and requirements. Code shows how to add one to a page.
Use an input when the user types a value that is not picked from a list. Use it to:
When the user picks one value from a fixed list, use eco-select. For one of two or three options use eco-radio, and for any number of options eco-checkbox. For several lines of text use eco-textarea.
A placeholder is not a label: it disappears when the user types, and it is easy to miss. Every field has a visible label.
An invalid field says what is wrong in the message, with the error icon. A red border alone is easy to miss and is not enough for everyone.
| The user… | Use |
|---|---|
| types free text, a number or a search term | Input |
| types several lines of text | eco-textarea |
| picks one value from a fixed list | eco-select |
| picks one of two or three options | eco-radio |
| picks any number of options | eco-checkbox |
label-md or label-sm, uppercase, 4px above the box.body-md (Large) or body-sm. The placeholder is text-tertiary.aria-label.body-sm, 4px below the box. Hint, error or success.The focus ring is a separate element around the box, 2px and 3px outside it, so focusing never changes the layout or the box size.
An input can have a left icon, right-hand icons and a message. Enable only the ones the field needs. Sizes are under Sizes below.
A left icon shows the type of input (the default is search). Right-hand icons are optional: clear appears only when the field has a value, a divider separates clear from the action icons. Enable only the ones the field needs.
The message sits below the field, in body-sm. Hint text is neutral, error and success change the color of the border and the message. The message icon is optional and up to you; an icon next to an error message helps so color is not the only signal.
Three sizes on desktop (Large 48px, Small 40px, XSmall 32px) and two on mobile (Large 40px, Small 32px). Figma has a Breakpoint property: Desktop is 769px and up, Mobile is below 769px. The component switches by itself; the Breakpoint toggle forces one for preview.
Large is for standard forms, Small for compact surfaces, XSmall for dense tables and filters (desktop only: on mobile it is not available, use Small). Measurements are under Sizes in Specifications.
The field is as wide as its container: set the width on the container, not on the field. In the examples on this page the container is 360px or narrower.
The box has a 1px border and a white fill. The border turns black when the field has a value, and the message and the border turn red or green for error and success. The focus ring is a 2px blue frame around the box. Token names and values are under Design Tokens in Specifications.
When the user types a value the field becomes Active: the border turns black and the clear button appears.
The clear button empties the field and returns focus to it. It is a real button with an aria-label.
Hover changes the border. Hover on a right icon gives a grey fill (Button) or turns the icon grey (Icon Button). The blue ring shows on keyboard focus only (body.keyboard-nav, set by a small script). All states are listed under States in Specifications.
Set aria-invalid="true" on an invalid field and point aria-describedby at the message. The message says what is wrong.
A disabled field is not focusable. It has a grey fill, a light border, and text-disabled for the text, the icons and the message.
All requirements are listed under Accessibility Requirements in Specifications.
Tab moves into and out of the field and to the icon buttons. The focus ring shows on keyboard focus only. Add the keyboard script once per page (see Code).
Every field has a label with for and id. A search field without a visible label needs an aria-label. An invalid field gets aria-invalid="true" and aria-describedby that points at the message.