Form Field

Interactive elements for inputting or selecting data.

A form field is the fundamental element of a form. It combines an input, its label, and helper text if needed. An input can be anything from a text field to checkboxes or sliders.

You can take a look at all of our form control components here.

Anatomy

The anatomy of the form control.

Label: Represents a caption for an input in a form; you can learn more about them in our label documentation.

Input: An element where the user can input data; there are exceptional cases where you can stack more than one input (Checkboxes/Radio buttons).

Helper text(optional): A small paragraph that gives the user helpful context about the data they need to provide. We recommend not exceeding three lines of text for it. If you need more, we recommend adding a link that might open a modal or a side panel.

Error text: A simple message notifying the user the data they added to the input was incorrect. It should be simple and straight to the point.

Styling

This documentation references form tokens. To learn more about all related tokens, you can look at this table.

Spacing

Vertical Stacking

The gap between form controls should be 16px (forms-formControl-gap).

Vertically stacking form controls.

Horizontal Stacking

We highly recommend horizontally stacking form controls ONLY WHEN we know for sure the total character length of at least one form control, for example, we know for sure a phone from Mexico will always have 10 numbers + the country code(+52), or we know the max character length of a pre-populated dropdown AND the form controls are related.

The gap between horizontally stacked form controls should be 16px (forms-formControl-gap).

Horizontally stacking related form controls.

Grouped Inputs (Checkbox & Radio button Groups)

If you have a radio button or checkbox group that requires more than one input, the gap between them should be 8px (forms-formControl-groupedInputs-gap).

The spacing between grouped inputs.

Color & Text Styles

The color and text styles are on each component’s documentation page.

Form Field Label - β

Form Field Help - β

Checkbox

A basic element that can be marked as selected and can be used in a list to provide multiple selection options.

Color Picker

A configurable interface for color selection.

Dropdown

Phone Input

Phone inputs allow users to enter phone numbers into forms. They may allow the user to select a specific country code.

Spin Button

A two-segment UI control increases or decreases the numeric value in a field incrementally.

Radio Button

Radio buttons are UI elements that select one option from a list of mutually exclusive options.

Text Area

A resizable text box for multiple lines of standard text.

Time Picker

A component that allows the user to select a specific time.

Time-Zone Picker

Time-zone pickers allow users to change the local time on a UI.

Toggle

A digital on/off switch that always has a default value and prompts users to choose between two mutually exclusive options. Toggles should also provide immediate results.

Something looks broken on this site?

Report it to the Design System team here!

Form Field

Anatomy