Placeholder
<Select
placeholder="Choose an option"
options={[
{ value: 'first', title: 'First' },
{ value: 'second', title: 'Second' },
{ value: 'third', title: 'Third' },
]}
/>
Selected option
<Select
selectedOptionValue="second"
options={[
{ value: 'first', title: 'First' },
{ value: 'second', title: 'Second' },
{ value: 'third', title: 'Third' },
]}
/>
With icon
<Select
selectedOptionValue="second"
options={[
{ value: 'first', title: 'First', icon: <SvgAdd /> },
{ value: 'second', title: 'Second', icon: <SvgLock /> },
{ value: 'third', title: 'Third' },
]}
/>
See the Icon set.
Disabled
<Select
isDisabled
selectedOptionValue="second"
options={[
{ value: 'first', title: 'First' },
{ value: 'second', title: 'Second' },
{ value: 'third', title: 'Third' },
]}
/>
Disabled option
<Select
selectedOptionValue="second"
options={[
{ value: 'first', title: 'First' },
{ value: 'second', title: 'Second' },
{ value: 'third', title: 'Third', isDisabled: true },
]}
/>
With divider
<Select
selectedOptionValue="second"
options={[
{ value: 'first', title: 'First' },
{ value: 'second', title: 'Second' },
{ value: 'third', title: 'Third', hasDivider: true },
]}
/>
Menu max width and height
<div>
<Select
menuMaxHeight={24}
selectedOptionValue="Second"
options={demoText.ordinals.map((ordinal) => {
return { value: ordinal, title: ordinal }
})}
/>
<Spacer bottom="small" />
<Select
menuMaxWidth={24}
trigger={(triggerContent, buttonProps) => (
<TextButton icon={<SvgChevronDown />} iconPosition="right" {...buttonProps}>
{triggerContent.title}
</TextButton>
)}
selectedOptionValue="Second"
options={demoText.ordinals.map((ordinal) => {
return { value: ordinal, title: ordinal }
})}
/>
</div>
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
<Select
selectedOptionValue="second"
onChange={option => {console.log(option)}}
options={[
{ value: 'first', title: 'First' },
{ value: 'second', title: 'Second' },
{ value: 'third', title: 'Third' },
]}
/>
onOuterClick callback
<Select
onChange={(option) => console.log(option)}
selectedOptionValue="second"
onOuterClick={() => console.log('onOuterClick')}
options={[
{ value: 'first', title: 'First' },
{ value: 'second', title: 'Second' },
{ value: 'third', title: 'Third' },
]}
/>
onOpenChange callback
Callback that provides the isOpen value when dropdown opens or closes.
<Select
onChange={(option) => console.log(option)}
selectedOptionValue="second"
onOpenChange={newState => console.log(newState)}
options={[
{ value: 'first', title: 'First' },
{ value: 'second', title: 'Second' },
{ value: 'third', title: 'Third' },
]}
/>
Custom trigger
Use a custom button to trigger the menu. Make sure the trigger element is a button.
With TextButton
<Select
trigger={(triggerContent, buttonProps) => (
<TextButton icon={<SvgChevronDown />} iconPosition="right" {...buttonProps}>
{triggerContent.title}
</TextButton>
)}
selectedOptionValue="second"
options={[
{ value: 'first', title: 'First' },
{ value: 'second', title: 'Second' },
{ value: 'third', title: 'Third' },
]}
menuMaxWidth={20}
onChange={option => {console.log(option)}}
/>
With placeholder
<Select
trigger={(triggerContent, buttonProps) => (
<button
disabled={triggerContent.isDisabled}
{...buttonProps}
>
<Text fontWeight={triggerContent.title && 'bold'}>
{triggerContent.title || triggerContent.placeholder}
</Text>
</button>
)}
placeholder="Choose an option"
options={[
{ value: 'apple', title: 'Apple' },
{ value: 'windows', title: 'Windows' },
]}
menuMaxWidth={20}
onChange={option => {console.log(option)}}
/>
With icons and selected option
<Select
trigger={(triggerContent, buttonProps) => (
<button
{...buttonProps}
style={{
display: 'flex',
alignItems: 'center',
gap: 'var(--lns-space-xsmall)'
}}
>
<Icon icon={triggerContent.icon}/>
{triggerContent.title}
<Icon icon={<SvgChevronSmallDown />}/>
</button>
)}
selectedOptionValue="second"
options={[
{ value: 'first', title: 'First', icon: <SvgAdd /> },
{ value: 'second', title: 'Second', icon: <SvgLock /> },
{ value: 'third', title: 'Third', icon: <SvgZap /> },
]}
menuMaxWidth={20}
onChange={option => {console.log(option)}}
/>
Props
menuMaxHeight
string | number
34
onChange
React.ReactEventHandler
placeholder
React.ReactNode
selectedOptionValue
string
menuMaxWidth
string | number
onOpenChange
(isOpen: boolean) => void
trigger
(triggerContent, buttonProps) => void