Ravox KitForms
Language Select
Language switcher with a flag and each language's name in itself (Português, English, Français). Flags are SVG, so they look the same on Windows, Mac, Linux and mobile (emoji flags turn into "BR" on Windows). Under the hood it is the Kit Select: keyboard, type-ahead and mobile screen reader support.
Settings
Examples
In the header, switching routes
Acme
Sign in
In the profile, with the full name
Emails and notifications arrive in this language.
Flag only
Regional variants
The flags
- br
- pt
- us
- gb
- es
- mx
- ar
- fr
- it
- de
- nl
- in
- jp
- cn
- kr
- ca
Installation
The command creates components/ui/language-select.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add language-selectProps
| Prop | Type | Default | Description |
|---|---|---|---|
| languages | { value, label, flag, code?, disabled? }[] | — | The languages. label in the language itself; flag is the country code (br, us, fr…); code is the short label in the compact button (default: the first two letters of value). |
| value / onValueChange | string / (value: string) => void | — | Controlled mode. To switch routes, call router.push in onValueChange. |
| defaultValue | string | — | Initial language, uncontrolled mode. |
| display | "code" | "label" | "flag" | "code" | What the button shows: flag + code (header), flag + name (profile form) or just the flag. The name stays available to screen readers. |
| size / label / hint / name | — | — | Same as Select: height, label, note and form submission. |
| <Flag code title> | FlagCode / string | — | The flag on its own (3:2, rounded corners and a thin edge). Without title it is decorative; with title it becomes a named image. FLAG_CODES lists the available ones. |