Time Zone Select
Selects
Source and install need .
pnpm dlx shadcn@latest add @assembli/language-selectLanguage Select
A searchable language picker on Base UI's Combobox. Every row shows the language in its own script with the English name beneath, search matches either name or the code, a Suggested group sits on top, right-to-left languages are set right to left and rows can carry a Beta tag. Also exports LanguageSwitcher, a compact globe trigger for headers and footers.
Props
Other props pass through to the root element.
value
string | null
A BCP 47 tag from the list, such as
"de".defaultValue
string | null
onValueChange
(code: string | null, language: Language | null) => void
suggested
string[]
Codes listed under "Suggested" while the search is empty, e.g. the browser's own languages.
languages
Language[]
Replace the built-in list.
disabled
boolean
name
string
open
boolean
defaultOpen
boolean
onOpenChange
(open: boolean) => void
label
React.ReactNode
hint
React.ReactNode
description
React.ReactNode
error
React.ReactNode
Replaces the description and marks the trigger
aria-invalid.placeholder
React.ReactNode
Default
"Select a language"triggerClassName
string
| Description | |||
|---|---|---|---|
| value | string | null | – | A BCP 47 tag from the list, such as |
| defaultValue | string | null | – | |
| onValueChange | (code: string | null, language: Language | null) => void | – | |
| suggested | string[] | – | Codes listed under "Suggested" while the search is empty, e.g. the browser's own languages. |
| languages | Language[] | – | Replace the built-in list. |
| disabled | boolean | – | |
| name | string | – | |
| open | boolean | – | |
| defaultOpen | boolean | – | |
| onOpenChange | (open: boolean) => void | – | |
| label | React.ReactNode | – | |
| hint | React.ReactNode | – | |
| description | React.ReactNode | – | |
| error | React.ReactNode | – | Replaces the description and marks the trigger |
| placeholder | React.ReactNode | "Select a language" | |
| triggerClassName | string | – |
