Popover Select

A select-style input that opens a custom popover with searchable options. Each option can include an optional icon, making it a good fit when you need richer visual context than a plain Select provides.

1<PopoverSelect label="Color" options={colorOptions} />
2

Usage

1import { PopoverSelect } from "atlas";
2
3<PopoverSelect
4  label="Color"
5  options={options}
6  value={value}
7  onChange={setValue}
8/>
9

Examples

Default
The default PopoverSelect renders a select-style trigger that opens a searchable popover of options.
1<PopoverSelect label="Color" options={colorOptions} />
2
Disabled
Set disabled to prevent the popover from opening. The trigger’s opacity is reduced to indicate that the control is inactive.
1<PopoverSelect label="Color" options={options} disabled />
2

API Reference

PropTypeDefault
optionsPopoverSelectOption[]-
valuestring-
onChange(value: string) => void-
placeholderstring-
labelstring-
disabledbooleanfalse

Related

  • Select for a lightweight, native dropdown when icons and search are not needed
  • Combobox for a text-input-driven select with type-ahead filtering