Forms

Picker

Spectrum's picker: a filled button showing the current choice and a chevron, and a menu of options below it with a check on the chosen one.

Preview

Live, in this page’s themeOpen on its own

Props

Prop	Type	Description
`items`Required	`PickerItem[]`
`value`	`string`
`defaultValue`	`string`
`onChange`	`(key: string) => void`
`label`	`string`	Names the picker; shown above it unless `hideLabel`.
`hideLabel`	`boolean`
`placeholder`	`string`
`badges`	`boolean`	Item keys are Badge statuses; the button and options show badges.
`quiet`	`boolean`	No fill at rest, for use inside a PropertyList.
`size`	`'M' \| 'L'`
`disabled`	`boolean`
`className`	`string`

Guidelines

Spectrum's picker: a filled button showing the current choice and a chevron, and a menu of options below it with a check on the chosen one. With badges, the button and options show Badge statuses, which is how a project's status is set.

Provide: items ({ key, label, icon }; with badges the key is a Badge status and the label is optional), value with onChange(key) or defaultValue, label (also names it for assistive tech; hideLabel hides it visually), placeholder, quiet (no fill, for inside a PropertyList), size (M or L on phones), disabled.

A project's status uses Picker.projectStatuses: To do, Pre-production, Filming, Editing, In review, Published. They are the Projects board's columns, so changing one here moves the card there.
Keyboard: Down or Up opens the menu, arrows move, Enter picks, Escape closes and returns focus to the button.
Use a Picker for one choice out of more than four. For two to four visible options use SegmentedControl.
Long lists scroll inside the menu. The menu is capped to the room on screen (320px at most) and scrolls on its own; the wheel and swipes stay in it, and moving through options with the keyboard keeps the page still. With little room below the button, it opens above.