Combobox
StableCampo em que a pessoa digita até a lista, com grupos, limpeza e seleção múltipla em chips. Composto sobre Base UI Combobox e sobre o InputGroup e o Button do Up Web DS. O Select mostra uma lista; o combobox deixa digitar dentro dela — o que só compensa depois do ponto em que varrer com os olhos para de funcionar, e cobra um preço real: o campo passa a aceitar texto que não casa com nada, então o estado vazio faz parte do contrato.
Instalação
npx up-web-ds add comboboxGera check, chevron-down, close para a biblioteca de ícones do projeto (components.json → iconLibrary).
Preview
Default
Grouped
With Clear
Multiple
All states
Default
Grouped
With Clear
Multiple
Metadata
Classificação
- Layer
- Primitive
- Domínio
- Domain-free (compartilhado)
- Categoria
- selection
- Status
- Stable
Origem e distribuição
- Fonte
- shadcn registry / combobox
- Licença
- MIT
- Distribuição
- Interna
Acessibilidade
- Teclado: revisado
- Leitor de tela: revisado
- Touch: revisado
- Reduced motion: revisado
Teclado verificado por teste: ArrowDown abre já com a primeira opção destacada, digitar estreita a lista em vez de exigir rolagem, Enter escolhe a opção destacada e Escape fecha sem tirar o foco do campo. Leitor de tela verificado por teste: o controle tem papel combobox, aria-expanded acompanha o estado, aria-controls aponta para o listbox portalizado, a opção escolhida é marcada por aria-selected, e quando nada casa o estado vazio é anunciado — um campo que aceita texto livre pode receber texto que não casa com nada, e não dizer nada de volta lê como campo quebrado. Em seleção múltipla cada chip é removível sozinho, verificado por teste: corrigir uma escolha entre duas não pode custar a outra. Touch verificado em navegador com emulação de toque em viewport de 375px: campo, opções e o botão de remover chip medem acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8, e o popup cabe na viewport. Reduced motion verificado com prefers-reduced-motion: reduce — os tokens de motion colapsam para 1ms e a animação de entrada do popup mede 0.001s.
Dependências
- Pacotes
- @base-ui/react
- Ícones
- check, chevron-down, close
- Construído sobre
- Input GroupButton
- Usado por
- Nenhum ainda