Combobox

Uma escolha, com o xis de tirar.

O xis por dentro diz o que se remove. Quando a ficha é texto, o nome sai pronto do próprio conteúdo ("Remover Clínica São Lucas"), e quando ela não é (um Avatar, um Badge), o aria-label da ficha é que responde. Sem um dos dois o leitor de tela lê uma fila de "Remover, Remover, Remover", e a WCAG 2.4.6 pede que o nome distinga.

labels.remove recebe o texto da ficha e devolve o nome, para trocar o verbo ou traduzir:

<ComboboxChip labels={{ remove: (label) => `Tirar ${label} da seleção` }}>
  Clínica São Lucas
</ComboboxChip>

A moldura das fichas da escolha múltipla, com o campo de busca dentro dela.

O campo entra como último filho, e não ao lado: as fichas e a digitação são o mesmo campo aos olhos de quem usa, e separar os dois faz a busca parecer um filtro de outra coisa.

Dentro dela, o clearable do ComboboxInput sai de cena: cada ficha já tem o seu xis, e um limpar geral encostado neles é o botão errado no lugar mais fácil de acertar sem querer.

O painel da lista, em portal com o tema. Traz a mensagem de vazio por dentro, em emptyMessage.

side, align e sideOffset posicionam o painel, com o mesmo significado e a mesma folga padrão de 6px do MenuContent, do SelectContent, do PopoverContent e do TooltipContent.

Uma seção da lista, com ComboboxGroupLabel de cabeçalho.

Serve para lista longa que tem famílias de verdade: clientes por cidade, produtos por categoria. Agrupar por agrupar aumenta a altura da lista sem diminuir a busca, que é justamente o que a peça existe para resolver.

O campo de busca com o limpar e a seta encostados. Vive dentro do Combobox.

O className veste a raiz, que aqui é a moldura que segura o campo e os dois botões, e não o <input>. Para alcançar cada uma delas pelo nome, use classNames com as partes wrapper e input:

<ComboboxInput classNames={{ input: "font-mono" }} />

É a diferença que separava esta peça do AutocompleteInput, que não tem moldura e por isso veste o próprio campo com o className.

Uma opção. Mostra o visto quando escolhida.

A lista. Recebe uma funcao que desenha cada item, e não filhos soltos: é assim que a Base UI filtra sem redesenhar tudo.

A linha entre dois ComboboxGroup da lista.

É a irmã do SelectSeparator, e fecha a paridade com o MenuSeparator: as três listas da biblioteca cortam do mesmo jeito. Como no Select, ela sai com role="presentation": um nó com papel próprio no meio das opções quebraria o "opção 3 de 12" que o leitor de tela anuncia.

Quando não usar

Enquanto a busca é o caminho principal, a linha decora e não orienta: quem digita três letras nunca vê o corte, porque a lista filtrada some com ele. Ela serve à lista parada, aberta e curta o bastante para ser lida de uma vez, e aí só entre grupos que têm nome.

O que está escolhido, para as fichas saberem o que desenhar.

Não renderiza elemento nenhum: recebe uma função e devolve o que ela montar. É a peça que faltava para o ComboboxChips servir para alguma coisa. Sem ela, a escolha múltipla com ficha só era possível importando direto da Base UI.