ComponentsFormSelect

Select

Single · multi · searchable · grouped · avatar options · 3 sizes

Single selectMulti selectSearchableOption groupsAvatar options3 sizes

Basic

Live preview

Single selection — clearable, required with error state, and disabled

Department

Choose your department

Required field

Please select a department

Disabled

App.tsx

tsx

1import { useState } from 'react'
2import { Select, type SelectOption } from 'omverse-ui'
3 
4const departmentOptions: SelectOption[] = [
5  { value: 'design',      label: 'Design' },
6  { value: 'engineering', label: 'Engineering' },
7  { value: 'marketing',   label: 'Marketing' },
8  { value: 'product',     label: 'Product' },
9  { value: 'sales',       label: 'Sales' },
10  { value: 'archived',    label: 'Archived', disabled: true },
11]
12 
13const [dept, setDept] = useState('')
14 
15{/* Clearable with helper text */}
16<Select
17  label="Department"
18  placeholder="Select department..."
19  options={departmentOptions}
20  value={dept}
21  onChange={setDept}
22  clearable
23  helperText="Choose your department"
24/>
25 
26{/* Required with error state */}
27<Select
28  label="Required field"
29  placeholder="Select department..."
30  options={departmentOptions}
31  value={dept}
32  onChange={setDept}
33  required
34  error={!dept}
35  errorText="Please select a department"
36/>
37 
38{/* Disabled */}
39<Select
40  label="Disabled"
41  placeholder="Cannot select..."
42  options={departmentOptions}
43  disabled
44/>

Searchable

Live preview

Filters options as the user types — useful for long lists

Department

App.tsx

tsx

1<Select
label="Department"
placeholder="Search departments..."
options={departmentOptions}
value={dept}
onChange={setDept}
searchable
clearable
9/>

Option groups

Live preview

Groups options under labeled sections — pass optionGroups instead of options

Country

App.tsx

tsx

1import { type SelectOptionGroup } from 'omverse-ui'
2 
3const countryGroups: SelectOptionGroup[] = [
{
  label: 'Asia',
  options: [
    { value: 'in', label: '🇮🇳 India' },
    { value: 'jp', label: '🇯🇵 Japan' },
    { value: 'sg', label: '🇸🇬 Singapore' },
  ],
},
{
  label: 'Europe',
  options: [
    { value: 'gb', label: '🇬🇧 United Kingdom' },
    { value: 'de', label: '🇩🇪 Germany' },
    { value: 'fr', label: '🇫🇷 France' },
  ],
},
{
  label: 'Americas',
  options: [
    { value: 'us', label: '🇺🇸 United States' },
    { value: 'ca', label: '🇨🇦 Canada' },
    { value: 'br', label: '🇧🇷 Brazil' },
  ],
},
28]
29 
30<Select
label="Country"
placeholder="Select country..."
optionGroups={countryGroups}
value={country}
onChange={setCountry}
searchable
clearable
38/>

Avatar options

Live preview

Options with avatarSrc and description render a profile image and subtitle

Assign to

App.tsx

tsx

1const teamOptions: SelectOption[] = [
2  { value: 'john',  label: 'John Doe',   description: 'Designer',  avatarSrc: 'https://i.pravatar.cc/150?img=1' },
3  { value: 'jane',  label: 'Jane Smith', description: 'Engineer',  avatarSrc: 'https://i.pravatar.cc/150?img=5' },
4  { value: 'bob',   label: 'Bob Lee',    description: 'Product',   avatarSrc: 'https://i.pravatar.cc/150?img=3' },
5  { value: 'alice', label: 'Alice Wang', description: 'Marketing', avatarSrc: 'https://i.pravatar.cc/150?img=9' },
6]
7 
8<Select
9  label="Assign to"
10  placeholder="Select team member..."
11  options={teamOptions}
12  value={assignee}
13  onChange={setAssignee}
14  searchable
15  clearable
16/>

Multi select

Live preview

Allows selecting multiple options — selected items are shown as removable chips

Technologies

2 selected

App.tsx

tsx

1const [tags, setTags] = useState(['react', 'ts'])
2 
3<Select
4  label="Technologies"
5  placeholder="Select technologies..."
6  options={tagOptions}
7  multi
8  values={tags}
9  onChangeMulti={setTags}
10  clearable
11  helperText={`${tags.length} selected`}
12/>

Sizes

Live preview

sm, md (default) and lg trigger heights

Small

Medium (default)

Large

App.tsx

tsx

1<Select label="Small"          size="sm" placeholder="Select..." options={options} value={size} onChange={setSize} />
2<Select label="Medium (default)" size="md" placeholder="Select..." options={options} value={size} onChange={setSize} />
3<Select label="Large"          size="lg" placeholder="Select..." options={options} value={size} onChange={setSize} />

Props

PropTypeDefaultDescription

labelstring—Label shown above the select

placeholderstring'Select...'Placeholder when no value selected

helperTextstring—Helper text shown below

optionsSelectOption[][]Flat list of options

optionGroupsSelectOptionGroup[]—Grouped options — takes priority over options

valuestring—Controlled value (single select)

valuesstring[][]Controlled values (multi select)

onChange(value: string) => void—Callback for single select

onChangeMulti(values: string[]) => void—Callback for multi select

multibooleanfalseEnables multi-select mode

searchablebooleanfalseShows a search input inside the dropdown

clearablebooleanfalseShows a clear button when a value is selected

requiredbooleanfalseMarks the field as required

errorbooleanfalseError state

errorTextstring—Error message shown below

disabledbooleanfalseDisables the select

size'sm' | 'md' | 'lg''md'Trigger height

maxDisplaynumber3Max chips shown in multi mode before +N more