Design system interno · uso exclusivo da Up Web Studio

Icon Provider · Lucide

Primitiveselection

Select

Stable

Campo de seleção com trigger, popup em listbox, grupos, rótulos e separadores. Composto sobre Base UI Select; a escolha é reportada pelo rótulo do item, não pelo valor bruto.

Instalação

npx up-web-ds add select

Gera check, chevron-down, chevron-up para a biblioteca de ícones do projeto (components.json iconLibrary).

Preview

Default

Camada

With Value

StatusTudo que a ingestão gera nasce como Incoming.

Grouped

Origem

Sizes

Camada (sm)
Camada (default)

Disabled

DomínioPrimitives são domain-free, então o campo não se aplica.

With Disabled Item

DistribuiçãoRestricted exige revisão de licença antes de ser oferecido.

Invalid

CamadaEscolha uma camada para continuar.

Scrollable

Papel de ícone

All states

Default

Camada

With Value

StatusTudo que a ingestão gera nasce como Incoming.

Grouped

Origem

Sizes

Camada (sm)
Camada (default)

Disabled

DomínioPrimitives são domain-free, então o campo não se aplica.

With Disabled Item

DistribuiçãoRestricted exige revisão de licença antes de ser oferecido.

Invalid

CamadaEscolha uma camada para continuar.

Scrollable

Papel de ícone

Metadata

Classificação

Layer
Primitive
Domínio
Domain-free (compartilhado)
Categoria
selection
Status
Stable

Origem e distribuição

Fonte
shadcn registry / select
Licença
MIT
Distribuição
Interna

Acessibilidade

  • Teclado: revisado
  • Leitor de tela: revisado
  • Touch: revisado
  • Reduced motion: revisado

Teclado verificado por teste: ArrowDown abre e percorre a lista, ArrowUp volta, Enter escolhe o item destacado, Escape desiste sem alterar o valor, e o foco retorna ao trigger nos dois desfechos. Um select desabilitado sai da ordem de tabulação, e um item desabilitado continua anunciado sem poder ser escolhido. Leitor de tela verificado em navegador: o trigger é um combobox nomeado pelo rótulo do campo, aria-expanded acompanha o estado, o popup portalizado é ligado por aria-controls e expõe options com a seleção atual marcada; a escolha é reportada pelo rótulo do item, não pelo valor bruto, e aria-invalid é exposto sem trocar o papel do controle. Touch verificado em viewport de 375px com emulação de toque: o trigger e cada opção medem acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8, e abrir e escolher funcionam por toque. 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, sem perder a abertura nem a escolha.

Dependências

Pacotes
Nenhuma
Ícones
check, chevron-down, chevron-up
Construído sobre
Nenhum
Usado por
Nenhum ainda