Component

Language Selector

A dropdown language selector with single and multi-select support. Groups options by category. Uses the headless @refraction-ui/language-selector core.

Examples

Select a language from the dropdown.

Single Select

Installation

$pnpm add @refraction-ui/react-language-selector

Usage

tsx

import { LanguageSelector } from '@refraction-ui/react-language-selector'

export function MyComponent() {
  const [lang, setLang] = useState('en')
  return (
    <LanguageSelector
      value={lang}
      onValueChange={setLang}
      options={[
        { value: 'en', label: 'English' },
        { value: 'es', label: 'Spanish' },
      ]}
    />
  )
}

Props

Prop	Type	Default	Description
`value`	`string \| string[]`	--	Selected language value(s).
`onValueChange`	`(value: string \| string[]) => void`	--	Callback when selection changes.
`options`	`LanguageOption[]`	--	Array of { value, label, group? }.
`multiple`	`boolean`	`false`	Allow multiple selections.
`placeholder`	`string`	`'Select language...'`	Placeholder text.
`className`	`string`	--	Additional CSS classes.