Native select
Seleção nativa — o select do próprio navegador, com o visual do estilo. Ideal para listas longas e conhecidas e no celular, onde abre o seletor do sistema.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar.
import { NativeSelect, Label } from "@camaleo/react";Anatomia
Um invólucro em volta de um <select> de verdade e de uma seta. As opções são elementos <option> e <optgroup> comuns.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.
E-mails e notas fiscais são enviados neste idioma.
Com descrição
Dentro de um Field, o FieldDescription fica ligado ao select e é lido depois do rótulo.
Opção de placeholder
Uma primeira opção vazia e desativada, mais required, faz a pessoa escolher em vez de ficar com um palpite seu.
Grupos de opções
O <optgroup> divide uma lista longa em seções com nome, e o leitor de tela anuncia o grupo.
Lista longa
Oitenta anos cabem bem: a pessoa digita "19" para pular, e o celular abre a própria roleta.
À vista · total R$ 1.200,00
Parcelamento
Escolha o número de parcelas. Um value controlado atualiza o resumo, e o aria-live lê o novo valor.
Definida pelo país de cobrança. Fale com o suporte para mudar.
Desativado, com o motivo
Um select desativado não recebe foco, então coloque o motivo em texto visível logo ao lado.
Obrigatório, com erro
Escolha uma forma de envio e o erro some. O Field invalid marca o select e liga o FieldError a ele.
Em linha
Numa barra de ferramentas, style={{ width: "auto" }} deixa ele do tamanho da maior opção, ao lado do rótulo.
Em contexto
São pedaços inteiros de interface para copiar, no estilo que você escolheu.
1–25 de 312
Entrega
Boas práticas
Países, estados, anos: a pessoa passa o olho ou digita para achar.
Duas opções escondidas atrás de um clique. Use um Switch, um Checkbox ou um RadioGroup.
Em respostas que importam, "Escolha um motivo…" faz a pessoa escolher de fato.
A pessoa pula o campo, e você coleta o seu padrão como se fosse a resposta dela.
Props
O NativeSelect recebe todos os atributos de <select>. Estes são os mais usados:
"country" ou "address-level1".value da opção escolhida, controlado ou não.event.target.value.value da opção escolhida, controlado ou não.className e style vão para o <span> de fora, para você definir o tamanho; os outros atributos vão para o <select>.
Styling hooks
Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio select.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
/* select sem borda dentro de uma barra de tabela */
.toolbar [data-slot="native-select"] > select {
--cml-border-control: transparent;
}Acessibilidade
- É o select do próprio navegador, então leitores de tela, controle por voz e celulares já conhecem.
- Dentro de um Field, o rótulo, a descrição e o erro ficam ligados ao select; fora dele, dê o nome com Label htmlFor.
- A seta é decorativa e fica escondida das tecnologias assistivas.
- O required usa a validação nativa: o formulário não é enviado e o navegador explica o motivo.