Placeholder

Selected option

With icon

See the Icon set.

Disabled

Disabled option

With divider

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
onChange
React.ReactEventHandler
isDisabled
boolean
placeholder
React.ReactNode
selectedOptionValue
string
menuMaxWidth
string | number
options
OptionsObject[]
container
HTMLElement
onOuterClick
() => void
onOpenChange
(isOpen: boolean) => void
trigger
(triggerContent, buttonProps) => void