Searchable select component with filtering, custom rendering, and keyboard navigation.

Combobox

A searchable selection component combining a text input with a filterable dropdown list.

Import

import { Combobox } from '@mks2508/mks-ui/react';

Basic Usage

.tsx

const frameworks = [
{ value: 'react', label: 'React' },
{ value: 'vue', label: 'Vue' },
{ value: 'svelte', label: 'Svelte' },
{ value: 'solid', label: 'Solid' },
];

<Combobox
options={frameworks}
placeholder="Select framework..."
emptyText="No frameworks found."
/>

Controlled

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

const frameworks = [
  { value: 'react', label: 'React' },
  { value: 'vue', label: 'Vue' },
  { value: 'svelte', label: 'Svelte' },
];

<Combobox
  options={frameworks}
  value={value}
  onValueChange={setValue}
  placeholder="Search..."
/>

API Reference

Prop	Type	Default	Description
`options`	`Array<{ value: string; label: string }>`	`[]`	List of selectable options
`value`	`string`	—	Controlled selected value
`onValueChange`	`(value: string) => void`	—	Selection change handler
`placeholder`	`string`	—	Placeholder text
`emptyText`	`string`	—	Text shown when no options match
`className`	`string`	—	Additional CSS classes

Combobox

Combobox

Import

Basic Usage

Controlled

API Reference

On this page