Selects
Selects
Selects
Selects
Foundations
Colors
Iconography
Grid + Spacing
Responsive
Shadows
Typography
Layout
Modals
Modals / Confirmation
Panels
Tabs
Actions & Inputs
Buttons
Checkboxes
Dropdowns
Forms
Links
Radio Buttons
Selects
Text Fields
Status & Feedback
Badges
Progress Indicators
Tooltips
Selects give merchants the ability to make a single selection or multiple selections from a list of options.
◢
Best practices
Used for selecting 4 or more predefined selection.
Have a default selection whenever possible.
If there is no logical default selection, leverage placeholder text to help merchants make the selection.
Sort the list of options in a way that makes the most sense to merchants.
Anatomy
1. Container
Houses all select options within the dropdown.
2. Line item
Represents each selection from the dropdown. It can be one-line, two-line, or multi-line.
3. Selection state (single-select)
Visual reinforcement of a single selected line item.
4. Selection control (multi-select)
Checkboxes allow users to select one line item or multiple line items.
Line item states & variations
Line item states & variations
Notes + Specifications
Notes + Specifications
–————
Style
Corner radius: 4px
Left & right padding: 16px
Top & bottom padding: 8px
Shadow: Floating
Single-line item height: 36px
Two-line item height: 56px
Primary label: Source Sans Pro, Regular, 16px
Secondary label: Source Sans Pro, Regular, 14px
