Picker

Use Picker to let a shopper select one option from a dropdown. It supports primary and secondary variants, two sizes, an optional icon, and a floating label.

Import

import { Picker } from '/@dropins/tools/components.js';

Props

Prop	Type	Req?	Description
options	PickerOption[]	No	The selectable options. Each option has a value, an optional text label, and an optional disabled flag.
value	string | null	No	The currently selected value. Update it later with setProps to change the selection programmatically.
defaultOption	PickerOption	No	The option selected by default.
name	string	No	Field name, used to map the value in a form.
placeholder	string	No	Text shown when no option is selected. Overridden by floatingLabel if both are set.
variant	'primary' | 'secondary'	No	Visual style. Defaults to primary.
size	'medium' | 'large'	No	Picker size. Defaults to medium.
floatingLabel	string	No	Floating label text, shown as the placeholder option before a value is selected and above the field as a floating label afterward.
icon	VNode	No	Icon rendered inside the picker.
disabled	boolean	No	Disable the picker. Defaults to false.
disableWhenSingle	boolean	No	Automatically disable the picker and select its only option when just one is available. Defaults to true; set to false to keep the picker interactive with a single option.
error	boolean	No	Show the error state styling. Defaults to false.
id	string	No	Element id. Defaults to the name value, or a generated id, when not set.
handleSelect	(event: Event) => void	No	Called when the shopper selects an option.

Picker also accepts standard HTML select attributes (for example, className), except value, size, and icon.

Example

import { Picker, provider } from '/@dropins/tools/components.js';

await provider.render(Picker, {
  name: 'sortBy',
  variant: 'primary',
  placeholder: 'Select an option',
  options: [
    { value: 'option1', text: 'Option 1' },
    { value: 'option2', text: 'Option 2', disabled: true },
    { value: 'option3', text: 'Option 3' },
  ],
  handleSelect: (event) => yourApplySort(event),
})(document.querySelector('.sort-by'));

Related

• MultiSelect — select multiple options.
• Icon — provide the icon prop.