Placeholder

Selected option

With icon

See the Icon set.

Disabled

Disabled option

Hidden and disabled option

This option is hidden and disabled. It can be used to show the selected option when it's not available in the list.

When an option is hidden, it will be visually removed from the list, but it will still be available in the DOM. And can still be selected through input controls (keyboard, mouse, touch, etc.) and screen readers.

Combined with the isDisabled prop, the option will be inaccessible from input controls (keyboard, mouse, touch, etc.) and hidden visually as well as from screen readers.

With divider

Menu can be positoned on the left or right side relative to the trigger. Wrap the <Select> component so it doesn’t take up full width and set menuMinWidth accordingly.

Container

Specify where it's going to be rendered in the DOM, this is especially useful when working with Shadow DOM.

<Select
  container={() => document.querySelector("#renderContainer")}
  options={[{ value: 'bahamas', title: 'Bahamas' }]}
/>

onChange callback

onOuterClick callback

onOpenChange callback

Callback that provides the isOpen value when dropdown opens or closes.

Custom trigger

Use a custom button to trigger the menu. Make sure the trigger element is a button.

With TextButton
With placeholder
With icons and selected option

Props

name
type
default
menuZIndex
number
1100
menuMaxHeight
string | number
34
menuPosition
'left' | 'right' | 'topRight' | 'topLeft'
'left'
onChange
React.ReactEventHandler
isDisabled
boolean
placeholder
React.ReactNode
selectedOptionValue
string
menuMaxWidth
string | number
menuMinWidth
string | number
options
OptionsObject[]
container
HTMLElement
onOuterClick
() => void
onOpenChange
(isOpen: boolean) => void
trigger
(triggerContent, buttonProps) => void