Language Combobox

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

import { LanguageCombobox } from '@/registry/bases/base-ui/components/data-entry/language-combobox';

Installation#

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

Usage#

import { LanguageCombobox } from '@/components/data-entry/language-combobox';

<LanguageCombobox kind="code" value={value} onValueChange={setValue}>
  <ComboboxTrigger render={<Button variant="outline" size="sm" />} aria-label="Select language">
    <ComboboxValue>
      {(option) => (
        <>
          {option?.icon}
          <span>{option?.label ?? 'Select'}</span>
        </>
      )}
    </ComboboxValue>
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxEmpty>No results.</ComboboxEmpty>
    <ComboboxList>
      {(option) => (
        <ComboboxItem key={option.value} value={option}>
          {option.icon}
          <span>{option.label}</span>
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</LanguageCombobox>

The root owns the option set and maps the string value to and from its option; the consumer composes every visible part inside it: a ComboboxTrigger (holding a ComboboxValue, whose render function receives the current LanguageOption), and a ComboboxContent with an optional ComboboxInput, a ComboboxEmpty and a ComboboxList whose render function receives each LanguageOption. Use kind="locale" for a UI language picker and kind="code" for a code block's language; pass explicit options to override either built-in set.

API reference#

LanguageCombobox#

Renders shadcn's Combobox and takes every prop it takes except items, value, defaultValue, onValueChange, multiple, itemToStringLabel and isItemEqualToValue, plus:

Maps the string value to and from its option (isItemEqualToValue, itemToStringLabel); kind selects the built-in option set - UI locale names, or code-language ids - when options is omitted. For kind="locale" without options, locales picks which BCP-47 codes to offer; omitted, only the current value is offered, so the picker still shows what is selected, and an empty value then offers nothing. It sets data-slot="language-combobox"; upstream's Combobox renders no element of its own to carry it, same as Avatar Picker's Popover.