Language Toggle Group

1
2
3import { useState, type ReactNode } from 'react';

import { LanguageToggleGroup } from '@/registry/bases/base-ui/components/data-entry/language-toggle-group';

Installation#

pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/language-toggle-group.json

Usage#

import { LanguageToggleGroup } from '@/components/data-entry/language-toggle-group';

<LanguageToggleGroup value={language} onValueChange={setLanguage} aria-label="Language">
  <ToggleGroupItem value="en">English</ToggleGroupItem>
  <ToggleGroupItem value="es">Spanish</ToggleGroupItem>
</LanguageToggleGroup>

The consumer composes one ToggleGroupItem per option, usually mapping Language Combobox's useLanguageOptions. Use it for a small, fixed set of two to four languages; for a longer or searchable list, use Language Combobox instead.

API reference#

LanguageToggleGroup#

Renders shadcn's ToggleGroup and takes every prop it takes except value, defaultValue, onValueChange and multiple, plus:

Binds Base UI's array value to the lone language and ignores a deselect, so a language is always chosen. It defaults variant to outline and keeps the toggle group's default spacing. It sets data-slot="language-toggle-group".