Form
A form refers to a group of input fields, that can range from text inputs to selects, each with a label to provide additional context. Many forms elements can be used within sections on a page. They can also be used as data sets within a list where related content is grouped.
Demo and Developer GuidelinesAnatomy
Label
Labels are title case without punctuation and contain a single noun or noun phrase (labels do not contain verbs).
Inputs/Select
States
Focus
All inputs and selects will have a focus surrounding the field.
Error
Error messages can appear in-line under a form input or select when an error on that field is preventing the form from saving. More information can be found on the Form Error Validation page.
Empty-Read State
Empty states are used when a user opts out of inputing content in the field. This state is visible on a read view. More information can be found on the Form Empty States page.
Placement
Horizontal Alignment
In the scenario where multiple form elements are placed horizontally, labels will be bottom aligned to ensure all inputs and select are properly spaced out.
Inline Labels
If you are using a checkbox, radio, or switch in a form, labels should be placed horizontally inline next to the component.
If you have a group of checkboxes or radios, you may include a top-level group label if needed. Avoid using a label above single form elements.
If you have a group of checkboxes or radios, you may include a top-level group label if needed. Avoid using a label above single form elements.
The existing Form React component does not easily support tooltips or required asterisks in inline labels. If you need this functionality, please help contribute it!
Columns
The form is built on a twelve column grid.
Within this grid, form elements may span multiple columns, depending on the needs of their content. For example, a street address may need to span the full twelve columns, whereas a ZIP Code may only need to span two or three columns.
In general, fields should adhere to one row each, unless they fall into a group of like elements, e.g. First & Last names, or State & ZIP Code.
Within this grid, form elements may span multiple columns, depending on the needs of their content. For example, a street address may need to span the full twelve columns, whereas a ZIP Code may only need to span two or three columns.
In general, fields should adhere to one row each, unless they fall into a group of like elements, e.g. First & Last names, or State & ZIP Code.
Specifications
Styling
Introduction
Product Writing Guide
Components
AvatarAvatar StackBannerBreadcrumbsButtonCardCheckboxContact ItemDate SelectDropdownDropdown FlyoutDropzoneEmpty StateFile SelectGroup SelectLinkMenuModalMulti SelectNumber/Currency InputPaginationPanelPillPill SelectPopoverProgress BarRadio ButtonSearchSegmented ControllerSelectSliderSpinnerSwitchTabsText AreaText EditorText InputTiered SelectThumbnailToastToggle ButtonTokenTooltipTree
DST Resources