Select

Native select

Preview

index.tsx

Preview

index.tsx

Choose option

Custom select

Preview

index.tsx

Choose option

Custom multiple select

Preview

index.tsx

Choose option

Design Tokens for Select

Token	Color for	State/Meaning
--par-color-bg-field-enabled	Select field background	Enabled
--par-color-bg-field-hovered	Select field background	Hovered
--par-color-bg-field-disabled	Select field background	Disabled
--par-color-bg-field-readonly	Select field background	Readonly
--par-color-bg-field-invalid	Select field background	Invalid/Error
--par-color-border-field-enabled	Select field border	Enabled
--par-color-border-field-hovered	Select field border	Hovered
--par-color-border-field-disabled	Select field border	Disabled
--par-color-border-field-invalid	Select field border	Invalid/Error
--par-color-border-field-focused	Select field border	Focused
--par-color-text-field-placeholder	Placeholder text	Any
--par-color-text-field-filled	Select field text	Filled
--par-color-text-field-label	Label text	Any
--par-color-text-field-disabled	Select field text	Disabled
--par-color-text-field-readonly	Select field text	Readonly
--par-color-text-field-invalid	Select field text	Invalid/Error
--par-color-icon-field-button-enabled	Icon color (button enabled)	Enabled
--par-color-icon-field-button-hovered	Icon color (button hovered)	Hovered
--par-color-icon-field-button-pressed	Icon color (button pressed)	Pressed
--par-color-icon-field-button-disabled	Icon color (button disabled)	Disabled

Select API Reference

`<Select />`

Prop	Type	Default	Description
native	boolean	false	Use native HTML `<select>` instead of custom select
options	array of `{ value, label, disabled? }`		List of options for the dropdown
value	string \| string[]		Selected value(s)
onChange	function (value: string \| string[] \| event)		Callback when value changes (event for native, value for custom)
multiselect	boolean	false	Allow multiple selection (custom select only)
filterable	boolean	false	Allow filtering options (custom select only)
clearButton	boolean	false	Show clear button to reset selection (custom select only)
deselectable	boolean	false	Allow deselecting a selected option (custom select only)
keepOpen	boolean	true	Keep dropdown open after selection (custom select only)
placeholder	string	'Please choose an option'	Placeholder text when no value is selected (custom select only)
floatingLabel	string \| ReactNode		Floating label above the select
leftIcon	ReactNode		Icon on the left side of the select
selectedIcon	ReactNode		Icon shown next to selected option(s) in dropdown (custom select only)
countDescription	string	'item(s) selected'	Description for selected count (custom multi-select only)
theme	'default' \| 'alternative'	'default'	Visual theme
selectSize	'sm' \| 'md'	'md'	Size of select
tagProps	object		Tag props for multi-select chips (custom select only)
disabled	boolean	false	Disable the select
onFocus	function (event)		Callback when select gains focus
onBlur	function (event)		Callback when select loses focus
children	ReactNode		Custom option/group elements (alternative to `options` prop)
...divProps	See MDN		Inherits all native div props (custom select only)
...selectProps	See MDN		Inherits all native select props (native select only)
...MenuProps	See Menu		Inherits all props from Menu (custom select only)
...TagProps	See Tag		Inherits all props from Tag (custom select only)

Note: Select automatically chooses between native and custom select based on the native prop. See Menu and Tag for additional props when using custom select.