Popselect
Popselect pops a menu of options from its trigger: pick one and it closes, or pick several with multiple. It is a Popover holding the option list that Select will share.
Demos
Basic
By default it opens on hover below the trigger; trigger="click" opens it on click and moves focus into the list. Disabled options are skipped.
Multiple and groups
multiple keeps the menu open and toggles each option; the value is an array. Options can be grouped with { type: "group", label, key, children }.
Long lists, footer and empty
Long lists scroll (with ScrollArea’s scrollbar) and the active option stays in view. header and footer add rows around the list; with no options it shows the empty text.
Keyboard
With focus in the list: ↑ / ↓ move the active option (skipping disabled ones and wrapping), Home / End jump to the ends, Enter or Space picks it, typing a letter jumps to the next option that starts with it, and Escape closes.
Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
options | PopselectMixedOption[] | required | Options { label, value, disabled? }, optionally in groups. | Unreleased |
value | PopselectValue | PopselectValue[] | null | undefined | Controlled value; an array with multiple. | Unreleased |
defaultValue | PopselectValue | PopselectValue[] | null | null | Initial value when uncontrolled. | Unreleased |
onUpdateValue | (value, option) => void | undefined | Called with the new value and the picked option. | Unreleased |
multiple | boolean | false | Pick several; the menu stays open. | Unreleased |
size | small | medium | large | medium | Row height and text size. | Unreleased |
renderLabel | (option, selected) => ReactNode | undefined | Custom label for an option. | Unreleased |
header | ReactNode | undefined | A row above the options. | Unreleased |
footer | ReactNode | undefined | A row below the options. | Unreleased |
empty | ReactNode | locale “No data” | Shown when there are no options. | Unreleased |
It also takes every Popover prop except content; trigger defaults to hover, placement to bottom and showArrow to false.