Pickers

Country and language pickers as dropdown compositions, not separate components.

Country

A pattern, not a component: DropdownMenu with DropdownMenuSearch and radio items. Show the flag beside the name, never on its own.

Business country

import { useState } from "react";
import {
  Button,
  ChevronDownIcon,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSearch,
  DropdownMenuTrigger,
  Flag,
  Label,
  type FlagCountry,
} from "@smallest-inc/ui";

const countries: { code: FlagCountry; name: string }[] = [
  { code: "AU", name: "Australia" },
  { code: "BR", name: "Brazil" },
  { code: "DE", name: "Germany" },
  { code: "IN", name: "India" },
  { code: "JP", name: "Japan" },
  { code: "AE", name: "United Arab Emirates" },
  { code: "GB", name: "United Kingdom" },
  { code: "US", name: "United States" },
];

export default function PickersCountry() {
  const [country, setCountry] = useState<FlagCountry>("IN");
  const [query, setQuery] = useState("");
  const selected = countries.find((item) => item.code === country);
  const matches = countries.filter((item) => item.name.toLowerCase().includes(query.trim().toLowerCase()));

  return (
    <div className="flex w-full max-w-xs flex-col gap-2">
      <Label>Business country</Label>
      <DropdownMenu onOpenChange={(open) => !open && setQuery("")}>
        <DropdownMenuTrigger render={<Button variant="secondary" className="w-full justify-between" />}>
          <span className="flex min-w-0 items-center gap-2">
            {selected ? <Flag country={selected.code} title="" className="[&_svg]:size-full!" /> : null}
            <span className="truncate">{selected?.name}</span>
          </span>
          <ChevronDownIcon className="size-4" />
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-(--anchor-width)">
          <DropdownMenuSearch
            placeholder="Search countries"
            value={query}
            onChange={(event) => setQuery(event.target.value)}
          />
          {matches.length === 0 ? (
            <div className="px-2 py-1.5 text-sm text-fg-secondary">No countries found.</div>
          ) : (
            <DropdownMenuRadioGroup value={country} onValueChange={(next) => setCountry(next as FlagCountry)}>
              {matches.map((item) => (
                <DropdownMenuRadioItem
                  key={item.code}
                  value={item.code}
                  closeOnClick
                  leading={<Flag country={item.code} title="" className="[&_svg]:size-full!" />}
                >
                  {item.name}
                </DropdownMenuRadioItem>
              ))}
            </DropdownMenuRadioGroup>
          )}
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}

Language

Show each language's own name as trailing text, and match the search against both names.

Agent language

import { useState } from "react";
import {
  Button,
  ChevronDownIcon,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSearch,
  DropdownMenuTrigger,
  Label,
} from "@smallest-inc/ui";

const languages = [
  { code: "en", name: "English", native: "English" },
  { code: "hi", name: "Hindi", native: "हिन्दी" },
  { code: "ta", name: "Tamil", native: "தமிழ்" },
  { code: "es", name: "Spanish", native: "Español" },
  { code: "fr", name: "French", native: "Français" },
  { code: "de", name: "German", native: "Deutsch" },
  { code: "ar", name: "Arabic", native: "العربية" },
  { code: "ja", name: "Japanese", native: "日本語" },
];

export default function PickersLanguage() {
  const [language, setLanguage] = useState("en");
  const [query, setQuery] = useState("");
  const selected = languages.find((item) => item.code === language);
  const needle = query.trim().toLowerCase();
  const matches = languages.filter(
    (item) => item.name.toLowerCase().includes(needle) || item.native.toLowerCase().includes(needle),
  );

  return (
    <div className="flex w-full max-w-xs flex-col gap-2">
      <Label>Agent language</Label>
      <DropdownMenu onOpenChange={(open) => !open && setQuery("")}>
        <DropdownMenuTrigger render={<Button variant="secondary" className="w-full justify-between" />}>
          <span className="truncate">{selected?.name}</span>
          <ChevronDownIcon className="size-4" />
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-(--anchor-width)">
          <DropdownMenuSearch
            placeholder="Search languages"
            value={query}
            onChange={(event) => setQuery(event.target.value)}
          />
          {matches.length === 0 ? (
            <div className="px-2 py-1.5 text-sm text-fg-secondary">No languages found.</div>
          ) : (
            <DropdownMenuRadioGroup value={language} onValueChange={(next) => setLanguage(String(next))}>
              {matches.map((item) => (
                <DropdownMenuRadioItem
                  key={item.code}
                  value={item.code}
                  closeOnClick
                  trailing={
                    <span lang={item.code} className="text-fg-tertiary">
                      {item.native}
                    </span>
                  }
                >
                  {item.name}
                </DropdownMenuRadioItem>
              ))}
            </DropdownMenuRadioGroup>
          )}
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}

Phone number

Put the country code picker inside the phone field's leading addon. Phone pickers use the 24×16 flag.

Transfer number

import { useState } from "react";
import {
  ChevronDownIcon,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
  Flag,
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  Label,
  type FlagCountry,
} from "@smallest-inc/ui";

const codes: { country: FlagCountry; name: string; dial: string }[] = [
  { country: "IN", name: "India", dial: "+91" },
  { country: "US", name: "United States", dial: "+1" },
  { country: "GB", name: "United Kingdom", dial: "+44" },
  { country: "AE", name: "United Arab Emirates", dial: "+971" },
  { country: "SG", name: "Singapore", dial: "+65" },
];

export default function PickersPhone() {
  const [country, setCountry] = useState<FlagCountry>("IN");
  const selected = codes.find((item) => item.country === country);

  return (
    <div className="flex w-full max-w-xs flex-col gap-2">
      <Label htmlFor="transfer-number">Transfer number</Label>
      <InputGroup>
        <InputGroupAddon>
          <DropdownMenu>
            <DropdownMenuTrigger
              render={<InputGroupButton size="xs" aria-label={`Country code, ${selected?.name}`} />}
            >
              {selected ? <Flag country={selected.country} title="" className="h-4 w-6 [&_svg]:size-full!" /> : null}
              <span className="text-fg tabular-nums">{selected?.dial}</span>
              <ChevronDownIcon className="size-4" />
            </DropdownMenuTrigger>
            <DropdownMenuContent className="w-64">
              <DropdownMenuRadioGroup value={country} onValueChange={(next) => setCountry(next as FlagCountry)}>
                {codes.map((item) => (
                  <DropdownMenuRadioItem
                    key={item.country}
                    value={item.country}
                    closeOnClick
                    leading={<Flag country={item.country} title="" className="h-4 w-6 [&_svg]:size-full!" />}
                    trailing={<span className="text-fg-tertiary tabular-nums">{item.dial}</span>}
                  >
                    {item.name}
                  </DropdownMenuRadioItem>
                ))}
              </DropdownMenuRadioGroup>
            </DropdownMenuContent>
          </DropdownMenu>
        </InputGroupAddon>
        <InputGroupInput id="transfer-number" type="tel" inputMode="tel" placeholder="98765 43210" />
      </InputGroup>
    </div>
  );
}

Best practices

When to use

Use for compact, constrained choices such as country, language, or phone country code.
Use a general Combobox when the collection needs broad search, grouping, or custom option rendering.

Behavior

Build pickers from DropdownMenu with DropdownMenuSearch and a DropdownMenuRadioGroup, so the current choice shows a check. Reset the query when the menu closes.
Match search against every name people might type, such as “German” and “Deutsch”.
Put a phone country code picker in the leading addon of the phone field, using the 24×16 flag.

Content

Show the flag beside the country name, never on its own. Show each language in its own name as trailing text.

Accessibility

Give the phone code trigger an aria-label that includes the country, like “Country code, India”, and set lang on native-language names.

PreviousFilters