Select

Single selection dropdown with search and portal support.

Also known as: dropdown, picker, option selector, single select

View in Storybook

When to use

• Choosing one option from a predefined list. For multiple selections, use MultiSelect.
• For search with suggestions, use Autocomplete.

Import

import { Select } from '@vacano/ui'

Usage

const [value, setValue] = useState('')

const options = [
  { value: 'us', label: 'United States' },
  { value: 'uk', label: 'United Kingdom' },
  { value: 'de', label: 'Germany' },
]

<Select
  value={value}
  options={options}
  onChange={setValue}
  placeholder="Select country"
/>

With Label

<Select
  label="Country"
  value={value}
  options={options}
  onChange={setValue}
/>

Variants

<Select variant="normal" value="" options={options} placeholder="Normal" />
<Select variant="error" value="" options={options} placeholder="Error" />

Sizes

<Select size="default" value="" options={options} placeholder="Default" />
<Select size="compact" value="" options={options} placeholder="Compact" />

Disabled Options

const options = [
  { value: 'active', label: 'Active' },
  { value: 'pending', label: 'Pending', disabled: true },
  { value: 'archived', label: 'Archived' },
]

<Select value="" options={options} placeholder="Select status" />

Full Width

<Select fullWidth value="" options={options} placeholder="Full width" />

With Message

<Select label="Country" variant="error" value="" options={options} message="Please select a country" />
<Select label="Region" value="" options={options} message="Optional field" />

Portal Rendering

For use inside containers with overflow: hidden:

<Select
  value={value}
  options={options}
  portalRenderNode={document.body}
/>

Props

Prop	Type	Default	Description
value	string	required	Selected value
options	SelectOption[]	required	Array of options
onChange	(value: string) => void	-	Change handler
label	string	-	Label text
placeholder	string	'Select...'	Placeholder text
variant	'normal' | 'error'	'normal'	Visual variant
size	'compact' | 'default'	'default'	Select size
disabled	boolean	false	Disable select
fullWidth	boolean	false	Full width
message	string	-	Message text below select (error, hint)
portalRenderNode	HTMLElement | null	-	Portal target for dropdown
className	string	-	CSS class name for the root element
classnames	SelectClassNames	-	Custom class names for inner elements
ref	Ref<HTMLDivElement>	-	Ref to the root container element
data-test-id	string	-	Test identifier attribute

Option Type

type SelectOption = {
  value: string
  label: string
  disabled?: boolean
}

ClassNames

Key	Description
label	Label element
trigger	Trigger button
dropdown	Dropdown container
option	Individual option

Related

• MultiSelect - Multiple option selection
• Autocomplete - Search with async suggestions
• Dropdown - Custom dropdown menus
• RadioGroup - Radio button group for single selection