Introduction
Design PrinciplesAccessibility
Foundation
ColorGridIconographyIllustrationsShadowsTypography
Product Writing Guide
OverviewProduct's PersonalityBest PracticesInclusive LanguageWriting AccessiblyWriting GloballyWriting for AIGrammar RulesGlossaries
Components
ACTIONS
ButtonDropdownDropdown FlyoutToggle ButtonSegmented Controller
DISPLAY
AvatarAvatar StackContact ItemFile ListPillTokenThumbnail
INPUT
CheckboxDate SelectDropzoneFile SelectGroup SelectMenuMulti SelectNumber/Currency InputPill SelectRadio ButtonSingle SelectSliderSwitchText AreaText Editor (RTF)Text InputTiered Select
LOADING
Progress BarSpinner
MESSAGING
BannerEmpty StateToastTooltip
navigation
BreadcrumbsLinkPaginationSearchTabsTree
overlays & surfaces
CardModalPanelPopoverTearsheet
Layouts
DetailEmailPage TemplateRelated ItemsTool Landing Layout
Patterns
Content FlowFormForm Empty StateIn-Line Error ValidationOverlay UsageTitle LockupEmail Notifications
Views
Data Table
Data TableCells & RowsLocation Filter
Lists vs. TablesTile
Other Resources
Development Resources

Form Empty State

Form empty states are used to indicate that no data is available to display for a given form field.
Demo and Developer Guidelines

Anatomy

Empty State

A form value in read mode should never be void of text. If a user has opted out of completing a form field the double dashes will appear to clearly indicate that there should not be content displayed for that element.
Correct
Incorrect

Behavior

When a user fills out a form and leaves any input or select blank (that are not otherwise required) the empty input or select will display itself as -- [two dashes] once the form is in read mode.

Each form element will have the same read view empty state. Unless specified differently for the given component.
If a single checkbox is needed (but not recommended), the empty state will be text that reads ‘No’ in place of the --. See the checkbox component page for more info.

Specifications

Styling

The typography and color used for the label will align with the specific component used in edit mode.

Padding

Padding between the label and -- in the read view should default to the defined form padding, agnostic of the field's input type. This rule includes components like checkbox/radio list that have more padding between the label and the list on read.