Placeholder
<Select
placeholder="Choose an option"
options={[
{ value: 'bahamas', title: 'Bahamas' },
{ value: 'bahrain', title: 'Bahrain' },
{ value: 'bangladesh', title: 'Bangladesh' },
]}
/>
Selected option
<Select
selectedOptionValue="bahamas"
options={[
{ value: 'bahamas', title: 'Bahamas' },
{ value: 'bahrain', title: 'Bahrain' },
{ value: 'bangladesh', title: 'Bangladesh' },
]}
/>
With icon
<Select
selectedOptionValue="bahamas"
options={[
{
value: 'bahamas',
title: 'Bahamas',
icon: <SvgLaunch />,
},
{ value: 'bahrain', title: demoText.long, icon: <SvgFolder /> },
{ value: 'without icon', title: 'Without icon' },
]}
/>
See the Icon set.
Disabled
<Select
isDisabled
selectedOptionValue="bahamas"
options={[{ value: 'bahamas', title: 'Bahamas' }]}
/>
Disabled option
<Select
selectedOptionValue="bahamas"
options={[
{ value: 'bahamas', title: 'Bahamas' },
{ value: 'disabled option', title: 'Disabled option', isDisabled: true },
{ value: 'disabled option with icon', title: 'Disabled option with icon', icon: <SvgFolder />, isDisabled: true },
{ value: 'bangladesh', title: 'Bangladesh' },
]}
/>
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' }]}
/>
onOpenChange callback
Callback that provides the isOpen value when dropdown opens or closes
<Select
onChange={() => console.log()}
selectedOptionValue="bahamas"
onOpenChange={newState => {console.log(newState)}}
options={[
{ value: 'bahamas', title: 'Bahamas' },
{ value: 'bahrain', title: 'Bahrain' },
{ value: 'bangladesh', title: demoText.long },
]}
/>
Props
selectedOptionValue
string
options
[{
value: string,
title: node,
icon: node,
isDisabled: bool,
}]