Picker

Picker is a styled single-selection control that combines a trigger, the selected value, and a popover listbox. It is Spectrum 2's select. The collection is data-driven: pass an `items` array and a render function — static option JSX is not part of the Solid API, because children evaluate before the collection context exists.

Import

import { Picker, PickerItem } from '@proyecto-viviana/solid-spectrum';

Options come from items

Pass an items array and a render function. Each item needs a stable id, and a textValue for typeahead when the child content is not plain text. defaultSelectedKey seeds the uncontrolled selection.

Plan

<Picker label="Plan" items={plans} defaultSelectedKey="pro">
  {(item) => (
    <PickerItem id={item.id} textValue={item.name}>
      {item.name}
    </PickerItem>
  )}
</Picker>

Disabled options

disabledKeys marks individual options unselectable. They stay announced but are skipped during keyboard navigation.

<Picker aria-label="Plan" items={plans} disabledKeys={["enterprise"]}>
  {(item) => (
    <PickerItem id={item.id} textValue={item.name}>
      {item.name}
    </PickerItem>
  )}
</Picker>

What Picker does not do yet

Picker's collection is flat. There is no grouped variant: PickerSection is exported, but it is a primitive for the composed Select / SelectListBox assembly, not something Picker reads. It also takes no title — a section's heading is a Header child, as in React Aria Components.

Both are gaps against React Spectrum, where static children and grouped options are ordinary usage. They are tracked; until they close, reach for the composed Select assembly if you need groups.

Picker Props

Props

Prop	Type	Default	Description
`label`	string	—	Visible label rendered above the trigger
`items`	T[]	—	Required. The data the options are built from, rendered via the children render function
`selectedKey`	Key \| null	—	The selected item's key (controlled)
`defaultSelectedKey`	Key	—	The initially selected item's key (uncontrolled)
`onSelectionChange`	(key: Key \| null) => void	—	Handler called when the selection changes
`disabledKeys`	Iterable<Key>	—	Keys of items that cannot be selected
`isDisabled`	boolean	`false`	Whether the picker is disabled
`children`	(item: T) => JSX.Element	—	Render function turning one item into a PickerItem

PickerItem Props

Props

Prop	Type	Default	Description
`id`	Key	—	Unique key identifying the option
`textValue`	string	—	Plain-text value used for typeahead and the selected display
`isDisabled`	boolean	`false`	Whether this individual option is disabled

Accessibility

The trigger exposes a button with aria-haspopup="listbox"
The dropdown is a listbox; options carry role="option" and aria-selected
The label is associated with the trigger, or supply an aria-label
Enter, Space, or Down opens the listbox; typing jumps to a matching option
Arrow keys move between options; Escape closes without changing the value
Disabled options are announced and skipped during navigation