Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA labelled form field that shows the chosen language in its own script and opens a searchable bottom-sheet list, with the native name and the English name for each option. Use this when a phone form or settings screen asks for a language or locale from a list too long for radio buttons.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when a phone form or settings screen asks for a language or locale from a list too long for radio buttons.
Do not use it for two or three languages (use a segmented control) or when the browser's language should simply be used.
It composes label, @tealmac/picker-sheet, which the CLI installs for you.
import { LanguagePickerField } from "@/components/language-picker-field"<div className="w-full max-w-sm">
<LanguagePickerField value={code} onValueChange={setCode} />
</div>| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | Selected language code. |
onValueChange | (code: string) => void | required | Called when a language is chosen. |
languages | Language[] | built-in list | { code, native, english }. |
lang attribute so screen readers pronounce it.The pattern ships with a Testing Library test (language-picker-field.test.tsx) that drives it through roles and the keyboard.