Language Picker Native Names

ProNew

A language picker that shows each language in its own script next to the English name, with the right lang and dir on every row. Use this when people switch the interface or content language.

Customize

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.

value

defaultValue

disabled

Guide and examples

When to use it

Use it for a language switcher or a content-language field, where a person who cannot read English must still find "Deutsch" or "العربية", and one who can may search for "German".

Do not use it when you only offer two languages. A toggle button reading the other language's own name is enough.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`value`	`string`	-	A BCP 47 tag such as `de` (controlled).
`defaultValue`	`string`	-	Initial tag.
`onValueChange`	`(tag: string, language: Language) => void`	-	Runs when a language is picked.
`languages`	`Language[]`	17 languages	`{ tag, name, native, dir? }`.
`disabled`	`boolean`	`false`	Disables the button.

Accessibility

Each native name is a span with its own lang and dir, so assistive technology switches voice and reading direction.
The button is a combobox; its name is the chosen language in its own script.
The English name is plain text in the row, so searching and reading work in either language.
Right-to-left names are isolated with dir, so they do not reorder the row.

Testing

The pattern ships with a Testing Library test (language-picker-native-names.test.tsx) that covers searching by native and English name, the lang and dir attributes and selecting.

Guide and examples

When to use it

Use it for a language switcher or a content-language field, where a person who cannot read English must still find "Deutsch" or "العربية", and one who can may search for "German".

Do not use it when you only offer two languages. A toggle button reading the other language's own name is enough.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`value`	`string`	-	A BCP 47 tag such as `de` (controlled).
`defaultValue`	`string`	-	Initial tag.
`onValueChange`	`(tag: string, language: Language) => void`	-	Runs when a language is picked.
`languages`	`Language[]`	17 languages	`{ tag, name, native, dir? }`.
`disabled`	`boolean`	`false`	Disables the button.

Accessibility

Each native name is a span with its own lang and dir, so assistive technology switches voice and reading direction.
The button is a combobox; its name is the chosen language in its own script.
The English name is plain text in the row, so searching and reading work in either language.
Right-to-left names are isolated with dir, so they do not reorder the row.

Testing

The pattern ships with a Testing Library test (language-picker-native-names.test.tsx) that covers searching by native and English name, the lang and dir attributes and selecting.