Componentes

Combobox

beta

Seleção com filtro por digitação. Serve quando a lista é longa demais para percorrer com o olho — abaixo disso, Select resolve.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/combobox

Playground

Placeholderplaceholder

Mostrar gatilhoshowTrigger

Mostrar limparshowClear

Desabilitadodisabled

<Combobox items={trilhas} defaultValue="Leitura">
  <ComboboxInput
  placeholder="Escolher trilha"
  />
  <ComboboxContent>…</ComboboxContent>
</Combobox>

Uso

Combobox filtra por digitação. Use quando a lista é longa demais para percorrer com o olho — Select serve às listas curtas, onde abrir e olhar já basta.

Múltipla escolha

`multiple` guarda a seleção como lista e passa a exibir chips dentro do campo. `ComboboxChips` vira a âncora do popup — por isso `ComboboxContent` recebe `anchor`, obtido de `useComboboxAnchor`.

Leitura

Escrita

Sem gatilho, com botão de limpar

`showTrigger={false}` tira a seta e deixa o campo com cara de busca comum. `showClear` e o gatilho competem pelo mesmo espaço no fim do campo — o gatilho some sozinho quando o limpar aparece.

Desabilitado

`disabled` é prop do `ComboboxInput`, não da raiz — desabilita a digitação e o gatilho junto.

Grupos

`items` aceita coleção de coleções: cada grupo entra como `ComboboxGroup`, com seus próprios `items`, e `ComboboxCollection` itera o conteúdo dentro dele. Serve para separar aluno por turma numa lista só.

Dentro de um InputGroup

`ComboboxInput` já monta um `InputGroup` por dentro. Filhos passados a ele — um `InputGroupAddon` com ícone de busca, por exemplo — entram nesse mesmo grupo, ao lado do gatilho.

Estado inválido

`aria-invalid` no `ComboboxInput` marca o campo — igual a qualquer entrada baseada em `InputGroup`. Use quando a trilha escolhida deixou de existir ou a validação do formulário rejeitou o valor.

Combobox versus Select

Os dois abrem uma lista de opções. A diferença é como o professor encontra a opção certa.

Select — lista curta e conhecida, como “Ativo, Inativo, Arquivado”. Abrir e olhar já basta.

Combobox — lista longa ou pouco previsível, como escolher uma trilha entre dezenas. Digitar filtra mais rápido do que rolar.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

ComboboxChip

Prop	Tipo	Padrão
showRemove	boolean	true

Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.

ComboboxInput

Prop	Tipo	Padrão
showClear	boolean	false
showTrigger	boolean	true

Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.

Combobox, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado

Demonstrações e playground: componente real de @voxmente/ui
Referência da API: TypeScript do pacote
Cor, espaçamento e raio das demonstrações: tokens de theme.css