Form

Select.List

View in Figma

A select row for choosing or disclosing a value, pairing a leading visual and a title with an optional description, a trailing selected value, and a chevron.

Overview

A select row for choosing or disclosing a value, pairing a leading visual and a title with an optional description, a trailing selected value, and a chevron.

This is titleThis is description
Trailing

Anatomy

SelectList
This is titleThis is description
Trailing
  1. 1container  The row. Sets height, side padding, and item spacing.
  2. 2visual-leading  optional  24pt leading glyph or avatar
  3. 3Container.Header
  4. 4label  required  Title text
  5. 5description  optional  Secondary line under the title
  6. 6value  optional  Trailing selected text
  7. 7chevron  optional  Trailing disclosure indicator
  8. 8Separator  optional  Full-width hairline below the row, toggled by the hasSeparator boolean (off by default).

Measurements

This is titleThis is description
Trailing
Height, padding, gaps, and radius, measured live from the rendered component

Specs

Values resolved live from the token spine. Token names follow the active platform; each links to its page.

Container
Row background
colorBackgroundElevatedPrimary
#FFFFFF
Horizontal side padding
spacingGapPositive2xl
16pt
Vertical padding and item spacing
spacingGapPositiveXl
12pt
Label
Title color
colorContentPrimary
#0C1828
Title typography
body.md.regular
Size 17px · typographyFontSizeBodyMdLine height 22px · typographyLineHeightBodyMdWeight 400 · typographyFontWeightRegularTracking -0.41px · typographyTrackingBodyMdParagraph spacing 0px · typographyParagraphSpacingBodyMdFamily SF Pro Text · typographyFontFamilyText
Description color
colorContentSecondary
#6D747E
Description typography
body.sm.regular
Size 14px · typographyFontSizeBodySmLine height 18px · typographyLineHeightBodySmWeight 400 · typographyFontWeightRegularTracking -0.32px · typographyTrackingBodySmParagraph spacing 12px · typographyParagraphSpacingBodySmFamily SF Pro Text · typographyFontFamilyText
Gap between title and description
spacingGapPositiveNone
0pt
Value
Trailing value color
colorContentPrimary
#0C1828
Trailing value typography
body.md.regular
Size 17px · typographyFontSizeBodyMdLine height 22px · typographyLineHeightBodyMdWeight 400 · typographyFontWeightRegularTracking -0.41px · typographyTrackingBodyMdParagraph spacing 0px · typographyParagraphSpacingBodyMdFamily SF Pro Text · typographyFontFamilyText
Spacing inside the trailing slot
spacingGapPositiveMd
8pt
Icon
Leading glyph color
colorContentTertiary
#8E959D
Trailing chevron color
colorContentTertiary
#8E959D
Separator
Separator width, off by default
strokeXs
0.5pt
Separator color, off by default
colorBorderPrimary
#E5E5E8

Properties

The component’s Figma API, the properties you set on an instance. Useful to designers in Figma and to engineers mapping it to code props.

PropertyTypeValues
hasVisualLeadingbooleanTrue
Visualinstance1 item
labelTitletextThis is title
hasDescriptionbooleanTrue
labelDescriptiontextThis is description
hasTrailingContentbooleanTrue
Trailinginstance1 item
hasIconTrailingbooleanTrue
hasSeparatorbooleanFalse
statevariantdefault, pressed, disabled

Accessibility

Associate the label with the control and expose its expanded or collapsed state plus the selected value to assistive technology. Keep the whole row a single target at least 44pt tall.

Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.