Select customizado acessível

Substituto do <select> nativo. Botão que herda a tipografia do campo, seta que gira, lista flutuante estilizável, navegação completa por teclado e ARIA. Escreve num <input type="hidden">, então o formulário envia como qualquer outro campo.

Existe por um motivo só: nenhum navegador deixa estilizar a lista de opções de um <select> nativo. Num formulário escuro e com tipografia de marca, o dropdown do sistema destoa de tudo.

Quando usar

• Formulário com identidade visual forte onde o <select> do sistema quebraria o conjunto.
• Listas de 3 a 8 opções curtas: faixas de valor, estados, tipo de projeto, orçamento.

Quando não usar

• Listas longas (país, cidade, CNAE). Sem busca e sem digitação para filtrar, 200 opções viram tortura. Use o nativo, ou um combobox com busca.
• Quando a acessibilidade precisa ser à prova de tudo. O nativo é sempre mais robusto que qualquer reimplementação — este cobre o caminho comum bem, não todos os casos.
• Em formulário sem identidade visual própria. Aí o nativo é melhor: é conhecido, rápido e funciona offline do CSS.

Padrão editorial

Faixas de valor são melhores que campo aberto em formulário de qualificação: o visitante não precisa revelar o número exato, e você segmenta igual.

Como usar

<link rel="stylesheet" href="componentes/conversao/select-custom/estilo.css">
<script src="componentes/conversao/select-custom/script.js"></script>

O script varre [data-csel], então vários selects na mesma página funcionam — e abrir um fecha os outros.

Ganchos

Teclado

Gotchas

• O <input type="hidden"> é o componente. Sem ele nada é enviado. O name dele é o que chega ao backend — o data-value da opção é só o texto.
• A lista precisa de hidden no HTML. Sem isso ela aparece por um instante no carregamento e fica tabulável fechada.
• O botão é type="button". Dentro de um <form>, sem isso ele envia o formulário ao ser clicado.
• e.stopPropagation() no clique do botão — senão o listener de "clicou fora" no document fecha a lista no mesmo clique que a abriu.
• aria-labelledby no botão e na lista aponta para o id do label. Cada select na página precisa de id próprio; repetir quebra o anúncio do leitor de tela.
• O tremor de erro é o único retorno visual. O campo não tem :invalid nativo, então quem valida (o formulário) precisa aplicar .has-error. Com movimento reduzido ele vira um contorno, não some.
• .csel-opt tem tabindex="-1". As opções não entram na ordem de Tab: quem navega é a seta, dentro do widget. É como o <select> nativo se comporta.

Histórico

Normalizações aplicadas na extração: prefixo cselect- → csel-; .open → .is-open, .shake → .has-error; cores cruas → --fg / --fg-muted / --dark-2 / --rule-2; adicionada navegação completa por teclado (setas, Home, End, Enter, Espaço) e o estado .is-active que ela precisa; adicionado tabindex="-1" nas opções e aria-labelledby na lista; scrollIntoView({block:'nearest'}) para a lista acompanhar a seta; adicionado fallback de prefers-reduced-motion no erro; wrapper de campo separado do widget, para o select poder viver dentro de qualquer formulário.