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.

Dropdown menu

type='menu'

Additional features for items

endIcons

disabled items

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

subtitles

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'
/>