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 React from 'react';
import { Select } from 'ui-lab-components';
 
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 React from 'react';
import { Select, Searchable } from 'ui-lab-components';
 
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>
  );
}
UI Lab