Combobox

Select com busca baseado em Popover com filtragem em tempo real, navegação por teclado e atributos ARIA acessíveis.

Demonstração

Props

Prop	Tipo	Padrão	Descrição
`options`	`{ value, label, disabled? }[]`	`[]`	Array de objetos { value, label, disabled? }.
`value`	`string`	`—`	Valor selecionado controlado.
`onChange`	`(value: string) => void`	`—`	Callback quando o valor muda.
`placeholder`	`string`	`'Select...'`	Texto de placeholder do botão de gatilho.
`searchPlaceholder`	`string`	`'Search...'`	Placeholder do campo de busca.
`emptyText`	`string`	`'No results found.'`	Texto exibido quando nenhuma opção corresponde à busca.
`disabled`	`boolean`	`false`	Desabilita o combobox.

Uso

import { Combobox } from '@ghiberti85/ui'

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

<Combobox
  options={[
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue' },
    { value: 'svelte', label: 'Svelte', disabled: true },
  ]}
  value={value}
  onChange={setValue}
  placeholder="Select a framework..."
  searchPlaceholder="Search..."
  emptyText="No results found."
/>

Ver no Storybook

Abrir no Storybook →

←AlertDialog Breadcrumb→