Docs/Combobox

Combobox

Searchable select with filtered options. Client component.

Usage

tsx

1'use client'
2import { useState } from 'react'
3import { Combobox } from '@storm-ds/ui'
4
5const options = [
6  { value: 'apple', label: 'Apple' },
7  { value: 'banana', label: 'Banana' },
8]
9
10function MyCombobox() {
11  const [value, setValue] = useState<string | undefined>()
12  return (
13    <Combobox
14      options={options}
15      value={value}
16      onChange={setValue}
17      placeholder="Search fruits..."
18    />
19  )
20}

Default

Framework

tsx

1'use client'
2import { useState } from 'react'
3import { Combobox } from '@storm-ds/ui'
4
5function ComboboxDemo() {
6  const [value, setValue] = useState<string | undefined>()
7  const options = [
8    { value: 'react', label: 'React' },
9    { value: 'vue', label: 'Vue' },
10    { value: 'svelte', label: 'Svelte' },
11  ]
12  return <Combobox options={options} value={value} onChange={setValue} />
13}

Searchable

Language

tsx

1<Combobox
2  options={options}
3  value={value}
4  onChange={setValue}
5  placeholder="Type to search..."
6  searchPlaceholder="Search frameworks"
7  emptyMessage="No framework found"
8/>

Disabled

tsx

1<Combobox
2  options={options}
3  value={value}
4  onChange={setValue}
5  disabled
6/>

Note

Filters options as user types. Shows emptyMessage when no matches. Can be disabled.

Props

Prop	Type	Default	Description
options	Array<{ value: string; label: string }>	-	Available options
value	string \| undefined	-	Selected value
onChange	(value: string \| undefined) => void	-	Called when selection changes
placeholder	string	'Select...'	Input placeholder
searchPlaceholder	string	-	Placeholder while searching
emptyMessage	string	'No results found'	Message when no options match
disabled	boolean	false	Disables the combobox
className	string	-	Custom classes

Use with AI

Create a Next.js client component using Storm UI's Combobox. Import: `import { Combobox } from '@storm-ds/ui'`. Use 'use client' and useState. Pass options array (Array<{ value: string; label: string }>), value, and onChange callback. Filters options as user types. Optional placeholder, searchPlaceholder, emptyMessage, disabled props. Example: `const [value, setValue] = useState(); const options = [{value: 'react', label: 'React'}, ...]; <Combobox options={options} value={value} onChange={setValue} placeholder="Select..." searchPlaceholder="Search..." emptyMessage="Not found" />`

ToggleGroup

DatePicker