@bimetal/picker-react-components

The default React picker / combobox component — instance #8 of the BIMETAL component family (the controller-only one). A thin binding over the canonical @bimetal/picker-headless controller: single/multi select, type-to-filter, chips with keyboard navigation, combobox ARIA. Renders the canonical .bm-picker* DOM; styles ship from @bimetal/picker-themes.

Dual-API — pass an already-owned controller, or let the component create one:

import { Picker } from '@bimetal/picker-react-components';

// Standalone — the component creates + owns a controller:
<Picker options={options} config={{ mode: 'multi', max: 3 }} onSelectionChange={setSel} label="Tags" />;

// Controlled — `selectedIds` is applied whenever the prop changes, without a
// remount; `+k` collapses the chips past the third:
<Picker options={statuses} selectedIds={sel} config={{ mode: 'multi', maxVisibleChips: 3 }}
  onSelectionChange={setSel} label="Status" />;

// Bound — an owner (e.g. the Forms renderer) passes its controller in:
<Picker controller={form.pickerFor(field.id)} label={field.label} />;

In the bound path the component only renders the controller's snapshot and forwards intents — it never creates, destroys, or mutates it; its owner sets a controlled selection directly via controller.setSelection(ids). Every interaction decision lives in the controller; the binding applies aria-activedescendant from the snapshot. Set darkMode for the dark palette.

Part of the BIMETAL headless component family. Apache License 2.0.