ComboboxSearchable dropdown for selecting a single option.

Combobox

import Combobox from '@/components/Combobox';
const options = [  { label: 'Lorem ipsum', value: 'lorem' },  { label: 'Dolor sit amet', value: 'dolor' },  { label: 'Consectetur adipiscing', value: 'consectetur' },  { label: 'Elit sed do', value: 'elit' },];
export function Example() {  return (    <Combobox      placeholder="..."      $options={options}    />  );}

Combobox ($title, $description)

Lorem optionRequired

Choose your preferred option from the searchable list.

import Combobox from '@/components/Combobox';
const options = [  { label: 'Lorem ipsum', value: 'lorem' },  { label: 'Dolor sit amet', value: 'dolor' },  { label: 'Consectetur adipiscing', value: 'consectetur' },  { label: 'Elit sed do', value: 'elit' },];
export function Example() {  return (    <Combobox      $title="Lorem option"      $description="Choose your preferred option from the searchable list."      $titleBadge="Required"      placeholder="..."      required      $options={options}    />  );}

Combobox (states)

Default value

The combobox can show a preselected option.

Invalid combobox

This field is shown in an invalid state.

Disabled combobox

This field is currently disabled.

import Combobox from '@/components/Combobox';
const options = [  { label: 'Lorem ipsum', value: 'lorem' },  { label: 'Dolor sit amet', value: 'dolor' },  { label: 'Consectetur adipiscing', value: 'consectetur' },  { label: 'Elit sed do', value: 'elit' },];
export function Example() {  return (    <>      <Combobox        $title="Default value"        $description="The combobox can show a preselected option."        defaultValue="dolor"        $options={options}      />      <Combobox        $title="Invalid combobox"        $description="This field is shown in an invalid state."        $invalid        placeholder="..."        $options={options}      />      <Combobox        $title="Disabled combobox"        $description="This field is currently disabled."        disabled        defaultValue="consectetur"        $options={options}      />    </>  );}