Select

A dropdown select island with optional search and clear support. Pass data as an array of strings or { value, label } objects. Use searchable to filter options by typed text.

Default

Pick a framework
React
Svelte
Vue
Angular
Solid
import { Select } from '@davaux/ui'

<Select
  label="Framework"
  placeholder="Pick a framework"
  data={['React', 'Svelte', 'Vue', 'Angular', 'Solid']}
/>

Custom option objects

Select country
United States
United Kingdom
Canada
Australia
Germany
<Select
  label="Country"
  placeholder="Select country"
  data={[
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' },
    { value: 'ca', label: 'Canada' },
  ]}
/>

Searchable

Type to search...
United States
United Kingdom
Canada
Australia
Germany
France
Japan
<Select
  label="Country"
  placeholder="Type to search..."
  searchable
  data={[...]}
/>

Clearable & initial value

TypeScript
TypeScript
JavaScript
Rust
Go
Python
<Select
  label="Language"
  data={['TypeScript', 'JavaScript', 'Rust', 'Go', 'Python']}
  value="TypeScript"
  clearable
/>

Description & error

Select an option to continue

Pick one
Option A
Option B
Option C

Please make a selection

<Select
  label="Required field"
  description="Select an option to continue"
  error="Please make a selection"
  withAsterisk
  placeholder="Pick one"
  data={['Option A', 'Option B', 'Option C']}
/>

Props

PropTypeDefaultDescription
data(string | { value, label, disabled? } )[][]Option list
valuestring''Initial selected value
placeholderstring'Select an option'Shown when nothing is selected
labelstring—Field label rendered above the select
descriptionstring—Helper text below the label
errorstring—Error message
searchableboolean—Filters options by typed text
clearableboolean—Shows a clear button when a value is selected
disabledboolean—Prevents interaction
requiredboolean—Marks the field required
withAsteriskboolean—Shows asterisk without native required
nothingFoundstring'Nothing found'Text shown when search returns no results
namestring—Form field name
idstring—Associates label with input