Skip to main content

Option selector

This is a versatile component that can allow selecting from a set of options in various ways.

<OptionSelect
icon={icons.columns}
label='Option'
value={value} // e.g. 'option1'
onChange={(value) => setData(value)}
options={[
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' },
]}
/>

Highlighted props

For the complete list of props, use your IDE's autocomplete functionality.

Control type

Toggle buttons

type='toggleButtons'

Split toggle buttons

type='toggleButtonsSplit'

Radio buttons

type='radios'

icons on items are not supported.

Segmented radio buttons

type='radiosSegmented'

icons on items are not supported.

type='menu'

Additional features for items

endIcons

disabled items

Separator lines
(separator: 'below' or separator: 'above')

subtitles

Section titles (sectionTitle)

shortcut/supplementary labels

Meant to be used as a part of a Menu.

type='submenu'

Most item features from 'menu' are supported.

<Menu>
<MenuItem>Lorem</MenuItem>
<MenuItem>Ipsum</MenuItem>
<MenuSeparator />
<OptionSelect
label='Option'
value={data}
onChange={setData}
options={[
{ value: 'option1', label: 'Option 1', icon: icons.design },
{ value: 'option2', label: 'Option 2', icon: icons.wrench },
{ value: 'option3', label: 'Option 3', icon: icons.magicAlt },
]}
type='submenu'
/>
</Menu>
Additional features

If no label is provided, the current value will be used as a label.

If subtitle is set (to true), the current value will be used as a subtitle.

Meant to be used as a part of a Menu.

type='standaloneMenuItems'

Most item features from 'menu' are supported.

<Menu>
<MenuItem>Lorem</MenuItem>
<MenuItem>Ipsum</MenuItem>
<MenuSeparator />
<OptionSelect
label='Option'
value={data}
onChange={setData}
options={[
{ value: 'option1', label: 'Option 1', icon: icons.design },
{ value: 'option2', label: 'Option 2', icon: icons.wrench },
{ value: 'option3', label: 'Option 3', icon: icons.magicAlt },
]}
type='standaloneMenuItems'
/>
</Menu>

Vertical alignment

(not applicable to all types)

<OptionSelect
icon={icons.columns}
label='Option'
value={value} // e.g. 'option1'
onChange={(value) => setData(value)}
options={[
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' },
]}
vertical
/>

Trigger customization

(might not apply to all types)

Hide the trigger icon with noTriggerIcon.

Hide the trigger label with noTriggerLabel.

Modify the "outside" component props with wrapperProps.

<OptionSelect
...
wrapperProps={{ className: 'bg-gray-100 p-4' }}
/>

Item customization

(might not apply to all types)

Hide the item icon with noItemIcon.

Hide the item label with noItemLabel.

Modify the item props with itemProps or just pass a class name with itemClassName.

<OptionSelect
...
itemProps={{ size: 'large' }}
itemClassName='flex-col h-auto px-16 py-8'
/>