Select

Dropdown select component for choosing from multiple options.

import { Select } from "ui-lab-components";
 
export function Example() {
  return (
    <Select>
      <Select.Trigger>
        <Select.Value placeholder="Select an option" />
      </Select.Trigger>
      <Select.Content>
        <Select.List>
          <Select.Item value="option1">Option 1</Select.Item>
          <Select.Item value="option2">Option 2</Select.Item>
          <Select.Item value="option3">Option 3</Select.Item>
        </Select.List>
      </Select.Content>
    </Select>
  );
}

Basic Select

A simple dropdown select component with options. Use this for form inputs and user choices.

import { Select } from 'ui-lab-components';
 
export const metadata = {
  title: 'Basic Select',
  description: 'A simple dropdown select component with options. Use this for form inputs and user choices.'
};
 
export default function Example() {
  return (
    <Select>
      <Select.Trigger>
        <Select.Value placeholder="Select an option" />
      </Select.Trigger>
      <Select.Content>
        <Select.Item value="option1" textValue="Option 1">Option 1</Select.Item>
        <Select.Item value="option2" textValue="Option 2">Option 2</Select.Item>
        <Select.Item value="option3" textValue="Option 3">Option 3</Select.Item>
      </Select.Content>
    </Select>
  );
}

Searchable Select

A filterable select component with search input. Type to filter through a large list of options.

import { Select, Searchable } from 'ui-lab-components';
 
export const metadata = {
  title: 'Searchable Select',
  description: 'A filterable select component with search input. Type to filter through a large list of options.'
};
 
const countries = [
  { value: 'us', label: 'United States' },
  { value: 'ca', label: 'Canada' },
  { value: 'mx', label: 'Mexico' },
  { value: 'br', label: 'Brazil' },
  { value: 'ar', label: 'Argentina' },
  { value: 'uk', label: 'United Kingdom' },
  { value: 'fr', label: 'France' },
  { value: 'de', label: 'Germany' },
  { value: 'it', label: 'Italy' },
  { value: 'es', label: 'Spain' },
  { value: 'pt', label: 'Portugal' },
  { value: 'nl', label: 'Netherlands' },
  { value: 'be', label: 'Belgium' },
  { value: 'ch', label: 'Switzerland' },
  { value: 'at', label: 'Austria' },
  { value: 'se', label: 'Sweden' },
  { value: 'no', label: 'Norway' },
  { value: 'dk', label: 'Denmark' },
  { value: 'fi', label: 'Finland' },
  { value: 'pl', label: 'Poland' },
  { value: 'jp', label: 'Japan' },
  { value: 'cn', label: 'China' },
  { value: 'kr', label: 'South Korea' },
  { value: 'in', label: 'India' },
  { value: 'au', label: 'Australia' },
  { value: 'nz', label: 'New Zealand' },
];
 
export default function Example() {
  return (
    <Select>
      <Searchable.Input placeholder="Search countries..." />
      <Searchable.Content searchPlaceholder="Type to filter...">
        {countries.map((country) => (
          <Select.Item key={country.value} value={country.value} textValue={country.label}>
            {country.label}
          </Select.Item>
        ))}
      </Searchable.Content>
    </Select>
  );
}

Country Selector

Button trigger reveals a searchable country list with flags and dial codes inside the dropdown content.

"use client";
 
import { useState } from 'react';
import { Select, Searchable } from 'ui-lab-components';
 
export const metadata = {
  title: 'Country Selector',
  description: 'Button trigger reveals a searchable country list with flags and dial codes inside the dropdown content.'
};
 
const countries = [
  { value: "us", label: "United States", flag: "🇺🇸", code: "+1" },
  { value: "gb", label: "United Kingdom", flag: "🇬🇧", code: "+44" },
  { value: "de", label: "Germany", flag: "🇩🇪", code: "+49" },
  { value: "fr", label: "France", flag: "🇫🇷", code: "+33" },
  { value: "jp", label: "Japan", flag: "🇯🇵", code: "+81" },
  { value: "kr", label: "South Korea", flag: "🇰🇷", code: "+82" },
  { value: "cn", label: "China", flag: "🇨🇳", code: "+86" },
  { value: "in", label: "India", flag: "🇮🇳", code: "+91" },
  { value: "br", label: "Brazil", flag: "🇧🇷", code: "+55" },
  { value: "au", label: "Australia", flag: "🇦🇺", code: "+61" },
  { value: "ca", label: "Canada", flag: "🇨🇦", code: "+1" },
  { value: "mx", label: "Mexico", flag: "🇲🇽", code: "+52" },
];
 
export default function Example() {
  const [country, setCountry] = useState<string | number | null>("us");
  const selected = countries.find(c => c.value === country);
 
  return (
    <Select
      selectedKey={country}
      label={selected?.label}
      onSelectionChange={setCountry}
      className="w-72"
    >
      <Select.Trigger>
        <Select.Value
          placeholder="Choose a country..."
          icon={selected && <span className="text-sm">{selected.flag}</span>}
        />
      </Select.Trigger>
      <Searchable.Content searchPlaceholder="Search countries...">
        {countries.map((c) => (
          <Select.Item key={c.value} value={c.value} textValue={c.label} icon={<span className="text-md">{c.flag}</span>}>
            <div className="flex items-center justify-between w-full">
              <span>{c.label}</span>
              <span className="ml-2 text-sm text-foreground-400">{c.code}</span>
            </div>
          </Select.Item>
        ))}
      </Searchable.Content>
    </Select>
  );
}
UI Lab