Introduction
Design Principles
Foundation
ColorGridIconographyIllustrationsShadowsTypography
Product Writing Guide
OverviewProduct's PersonalityBest PracticesInclusive LanguageWriting GloballyGrammar RulesGlossaries
Components
ACTIONS
ButtonDropdownDropdown FlyoutToggle ButtonSegmented Controller
DISPLAY
AvatarAvatar StackContact ItemFile ListPillTokenThumbnail
INPUT
CheckboxDate SelectDropzoneFile SelectGroup SelectMenuMulti SelectNumber/Currency InputPill SelectRadio ButtonSelectSliderSwitchText AreaText Editor (RTF)Text InputTiered Select
LOADING
Progress BarSpinner
MESSAGING
BannerEmpty StateToastTooltip
navigation
BreadcrumbsLinkPaginationSearchTabsTree
overlays & surfaces
CardModalPanelPopoverTearsheet
Layouts
DetailDockEmailPage TemplateRelated Items
Patterns
Content FlowFormForm Empty StateIn-Line Error ValidationOverlay UsageTitle Lockup
Views
Data Table
Data TableLocation Filter
ListLists vs TablesTile
DST Resources
ContributeCurrent InitiativesDevelopmentFigma LibrariesSpotlightUser TestingFeedback

Text Input

Inputs allow users to enter a short string of information into a form.
Demo and Developer GuidelinesFigma Component

Anatomy

Label

Labels are title case without punctuation and contain a single noun or noun phrase (labels do not contain verbs). See the Field Label Glossary for common labels and their use cases.

Character count limit: 25

Placeholder/Value

Input placeholder text is sentence case without punctuation. All select placeholder text says, “Enter [item]” where the item often refers to the input’s label. The placeholder disappears once a user starts typing in the input.
‍
Placeholder character count limit: 30

Error

Please see In-Line Error Validation on Submit.

Types

States

Behavior

Specifications

Styling