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'
icon
s on items are not supported.
Segmented radio buttons
type='radiosSegmented'
icon
s on items are not supported.
Dropdown menu
type='menu'
Additional features for items
endIcon
s
disabled
items
Separator lines
(separator: 'below'
or separator: 'above'
)
subtitle
s
Section titles (sectionTitle
)
shortcut
/supplementary labels
Submenu
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.
Menu radio buttons
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'
/>