Ravox KitFormulário
Language Select
Troca de idioma com bandeira e o nome de cada língua nela mesma (Português, English, Français). As bandeiras são SVG: aparecem iguais no Windows, no Mac, no Linux e no celular (a bandeira de emoji vira "BR" no Windows). Por baixo é o Select do Kit, com teclado, digitar para pular e leitor de tela no celular.
Ajustes
Exemplos
No cabeçalho, trocando a rota
Acme
Entrar
No perfil, com o nome inteiro
E-mails e notificações chegam nesta língua.
Só a bandeira
Variantes regionais
As bandeiras
- br
- pt
- us
- gb
- es
- mx
- ar
- fr
- it
- de
- nl
- in
- jp
- cn
- kr
- ca
Instalação
O comando cria components/ui/language-select.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx @ravox-ui/cli add language-selectOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| languages | { value, label, flag, code?, disabled? }[] | — | As línguas. label no próprio idioma; flag é o código do país (br, us, fr…); code é a sigla do botão compacto (padrão: as 2 primeiras letras de value). |
| value / onValueChange | string / (value: string) => void | — | Modo controlado. Para trocar de rota, chame router.push no onValueChange. |
| defaultValue | string | — | Língua inicial, modo não controlado. |
| display | "code" | "label" | "flag" | "code" | O que o botão mostra: bandeira + sigla (cabeçalho), bandeira + nome (formulário de perfil) ou só a bandeira. O nome continua acessível a leitores de tela. |
| size / label / hint / name | — | — | Os mesmos do Select: altura, rótulo, nota e envio no formulário. |
| <Flag code title> | FlagCode / string | — | A bandeira sozinha (3:2, cantos arredondados e borda fina). Sem title é decorativa; com title vira imagem com nome. FLAG_CODES lista as disponíveis. |