Vox Mente
Navegação

Componentes

Native Select

beta

Seleção com o menu do próprio sistema operacional. Em formulário simples e no celular, ganha do Select em quase tudo.

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/native-select

Playground
<NativeSelect aria-label="Período letivo" defaultValue="leitura">
  <NativeSelectOption value="leitura">Trilha de leitura</NativeSelectOption>
  <NativeSelectOption value="escrita">Trilha de escrita</NativeSelectOption>
  <NativeSelectOption value="matematica">Trilha de matemática</NativeSelectOption>
</NativeSelect>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.
NativeSelect
  └─ NativeSelectOptGroup
    └─ NativeSelectOption
  └─ NativeSelectOptGroup
    └─ NativeSelectOption

Uso

É um `<select>` de verdade por baixo — teclado, acessibilidade e o menu do sistema operacional vêm de graça. Prefira este em formulário simples.

NativeSelect ou Select?

Escolha pelo contexto de uso, não por preferência visual.

No celular, este componente abre a roda de seleção nativa do sistema — maior, com rolagem por gesto e sem risco de o popup cortar na borda da tela. Em formulário de cadastro, isso vale mais do que consistência visual entre plataformas.

Troque para Select quando precisar de opção com ícone, descrição de duas linhas, ou um menu que precisa flutuar sobre outro conteúdo, como um filtro dentro de um painel.

Tamanhos

`size` aceita `sm` e `md`. Use `sm` em formulários com várias linhas de campo.

Grupos

`NativeSelectOptGroup` mapeia para `<optgroup>` — o navegador desenha o cabeçalho do grupo à sua maneira.

Inválido

`aria-invalid` marca o erro visualmente e para o leitor de tela ao mesmo tempo — não separe as duas coisas.

Desabilitado

`disabled` esmaece o campo inteiro e bloqueia o toque. Uma opção também aceita `disabled` isoladamente.

Referência da API

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

NativeSelect

PropTipoPadrão
size"md" | "sm""md"

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

NativeSelectOptGroup, NativeSelectOption 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
  • Anatomia: exemplo desta página
  • 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