Slot UI
3

Select

PreviousNext

A dropdown control for choosing a single value from a list of options, with support for groups, labels, and multiple sizes.

Loading...
import {
  Select,
  SelectItem,
  SelectPopup,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const frameworks = [
  { label: "Next.js", value: "next" },
  { label: "Vite", value: "vite" },
  { label: "Astro", value: "astro" },
  { label: "Remix", value: "remix" },
];

export default function SelectDemo() {
  return (
    <Select items={frameworks}>
      <SelectTrigger>
        <SelectValue placeholder="Select Framework" />
      </SelectTrigger>
      <SelectPopup>
        {frameworks.map(({ label, value }) => (
          <SelectItem key={value} value={value}>
            {label}
          </SelectItem>
        ))}
      </SelectPopup>
    </Select>
  );
}

Installation

Usage

import {
  Select,
  SelectItem,
  SelectPopup,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectPopup>
    <SelectItem value="option-1">Option 1</SelectItem>
    <SelectItem value="option-2">Option 2</SelectItem>
    <SelectItem value="option-3">Option 3</SelectItem>
  </SelectPopup>
</Select>

Examples

Small

Loading...
import {
  Select,
  SelectItem,
  SelectPopup,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const frameworks = [
  { label: "Next.js", value: "next" },
  { label: "Vite", value: "vite" },
  { label: "Astro", value: "astro" },
  { label: "Remix", value: "remix" },
];

export default function SelectSm() {
  return (
    <Select items={frameworks}>
      <SelectTrigger size="sm">
        <SelectValue placeholder="Select Framework" />
      </SelectTrigger>
      <SelectPopup>
        {frameworks.map(({ label, value }) => (
          <SelectItem key={value} value={value}>
            {label}
          </SelectItem>
        ))}
      </SelectPopup>
    </Select>
  );
}

Large

Loading...
import {
  Select,
  SelectItem,
  SelectPopup,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const frameworks = [
  { label: "Next.js", value: "next" },
  { label: "Vite", value: "vite" },
  { label: "Astro", value: "astro" },
  { label: "Remix", value: "remix" },
];

export default function SelectLg() {
  return (
    <Select items={frameworks}>
      <SelectTrigger size="lg">
        <SelectValue placeholder="Select Framework" />
      </SelectTrigger>
      <SelectPopup>
        {frameworks.map(({ label, value }) => (
          <SelectItem key={value} value={value}>
            {label}
          </SelectItem>
        ))}
      </SelectPopup>
    </Select>
  );
}

Disabled

Loading...
import {
  Select,
  SelectItem,
  SelectPopup,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const frameworks = [
  { label: "Next.js", value: "next" },
  { label: "Vite", value: "vite" },
  { label: "Astro", value: "astro" },
  { label: "Remix", value: "remix" },
];

export default function SelectDisabled() {
  return (
    <Select disabled items={frameworks}>
      <SelectTrigger>
        <SelectValue placeholder="Select Framework" />
      </SelectTrigger>
      <SelectPopup>
        {frameworks.map(({ label, value }) => (
          <SelectItem key={value} value={value}>
            {label}
          </SelectItem>
        ))}
      </SelectPopup>
    </Select>
  );
}

Group

Loading...
import {
  Select,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectPopup,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const frontend = [
  { label: "Next.js", value: "next" },
  { label: "Remix", value: "remix" },
  { label: "Astro", value: "astro" },
];

const backend = [
  { label: "Hono", value: "hono" },
  { label: "Express", value: "express" },
  { label: "Fastify", value: "fastify" },
];

export default function SelectGroup_() {
  return (
    <Select items={[...frontend, ...backend]}>
      <SelectTrigger>
        <SelectValue placeholder="Select a framework" />
      </SelectTrigger>
      <SelectPopup>
        <SelectGroup>
          <SelectLabel>Frontend</SelectLabel>
          {frontend.map(({ label, value }) => (
            <SelectItem key={value} value={value}>
              {label}
            </SelectItem>
          ))}
        </SelectGroup>
        <SelectSeparator />
        <SelectGroup>
          <SelectLabel>Backend</SelectLabel>
          {backend.map(({ label, value }) => (
            <SelectItem key={value} value={value}>
              {label}
            </SelectItem>
          ))}
        </SelectGroup>
      </SelectPopup>
    </Select>
  );
}

Scrollable

Loading...
import {
  Select,
  SelectItem,
  SelectPopup,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const timezones = [
  { label: "Pacific/Midway", value: "pacific-midway" },
  { label: "Pacific/Honolulu", value: "pacific-honolulu" },
  { label: "America/Anchorage", value: "america-anchorage" },
  { label: "America/Los_Angeles", value: "america-los-angeles" },
  { label: "America/Denver", value: "america-denver" },
  { label: "America/Chicago", value: "america-chicago" },
  { label: "America/New_York", value: "america-new-york" },
  { label: "America/Halifax", value: "america-halifax" },
  { label: "America/Sao_Paulo", value: "america-sao-paulo" },
  { label: "Atlantic/Azores", value: "atlantic-azores" },
  { label: "Europe/London", value: "europe-london" },
  { label: "Europe/Paris", value: "europe-paris" },
  { label: "Europe/Helsinki", value: "europe-helsinki" },
  { label: "Europe/Moscow", value: "europe-moscow" },
  { label: "Asia/Dubai", value: "asia-dubai" },
  { label: "Asia/Kolkata", value: "asia-kolkata" },
  { label: "Asia/Bangkok", value: "asia-bangkok" },
  { label: "Asia/Shanghai", value: "asia-shanghai" },
  { label: "Asia/Tokyo", value: "asia-tokyo" },
  { label: "Australia/Sydney", value: "australia-sydney" },
  { label: "Pacific/Auckland", value: "pacific-auckland" },
];

export default function SelectScrollable() {
  return (
    <Select items={timezones}>
      <SelectTrigger>
        <SelectValue placeholder="Select timezone" />
      </SelectTrigger>
      <SelectPopup>
        {timezones.map(({ label, value }) => (
          <SelectItem key={value} value={value}>
            {label}
          </SelectItem>
        ))}
      </SelectPopup>
    </Select>
  );
}

Invalid

Loading...
import {
  Select,
  SelectItem,
  SelectPopup,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const frameworks = [
  { label: "Next.js", value: "next" },
  { label: "Vite", value: "vite" },
  { label: "Astro", value: "astro" },
  { label: "Remix", value: "remix" },
];

export default function SelectInvalid() {
  return (
    <Select items={frameworks}>
      <SelectTrigger aria-invalid>
        <SelectValue placeholder="Select Framework" />
      </SelectTrigger>
      <SelectPopup>
        {frameworks.map(({ label, value }) => (
          <SelectItem key={value} value={value}>
            {label}
          </SelectItem>
        ))}
      </SelectPopup>
    </Select>
  );
}