Select

A dropdown for selecting from a list of options.

$ npx @beaket/ui add select

Source

import { Label } from "@/components/ui/label";

import { Select } from "@/components/ui/select";

const args = {};

const render = () => (
  <div className="w-full">
    <Select>
      <Select.Trigger aria-label="Select a fruit">
        <Select.Value placeholder="Select a fruit" />
      </Select.Trigger>
      <Select.Content>
        <Select.Item value="apple">Apple</Select.Item>
        <Select.Item value="banana">Banana</Select.Item>
        <Select.Item value="orange">Orange</Select.Item>
        <Select.Item value="grape">Grape</Select.Item>
      </Select.Content>
    </Select>
  </div>
);

export default function Example() {
  return render();
}

Examples

All States

Normal

Disabled

Invalid

Source

import { Label } from "@/components/ui/label";

import { Select } from "@/components/ui/select";

const args = {};

const render = () => (
  <div className="flex max-w-sm flex-col gap-4">
    <div className="space-y-1.5">
      <Label htmlFor="select-normal">Normal</Label>
      <Select>
        <Select.Trigger id="select-normal">
          <Select.Value placeholder="Normal select" />
        </Select.Trigger>
        <Select.Content>
          <Select.Item value="1">Option 1</Select.Item>
          <Select.Item value="2">Option 2</Select.Item>
        </Select.Content>
      </Select>
    </div>

    <div className="space-y-1.5">
      <Label htmlFor="select-disabled">Disabled</Label>
      <Select disabled>
        <Select.Trigger id="select-disabled">
          <Select.Value placeholder="Disabled select" />
        </Select.Trigger>
        <Select.Content>
          <Select.Item value="1">Option 1</Select.Item>
        </Select.Content>
      </Select>
    </div>

    <div className="space-y-1.5">
      <Label htmlFor="select-invalid">Invalid</Label>
      <Select>
        <Select.Trigger id="select-invalid" aria-invalid={true}>
          <Select.Value placeholder="Invalid select" />
        </Select.Trigger>
        <Select.Content>
          <Select.Item value="1">Option 1</Select.Item>
        </Select.Content>
      </Select>
    </div>
  </div>
);

export default function Example() {
  return render();
}

With Groups

Food category

Source

import { Label } from "@/components/ui/label";

import { Select } from "@/components/ui/select";

const args = {};

const render = () => (
  <div className="max-w-sm space-y-1.5">
    <Label htmlFor="select-with-groups">Food category</Label>
    <Select>
      <Select.Trigger id="select-with-groups">
        <Select.Value placeholder="Select food" />
      </Select.Trigger>
      <Select.Content>
        <Select.Group>
          <Select.Label>Fruits</Select.Label>
          <Select.Item value="apple">Apple</Select.Item>
          <Select.Item value="banana">Banana</Select.Item>
        </Select.Group>
        <Select.Separator />
        <Select.Group>
          <Select.Label>Vegetables</Select.Label>
          <Select.Item value="carrot">Carrot</Select.Item>
          <Select.Item value="potato">Potato</Select.Item>
        </Select.Group>
      </Select.Content>
    </Select>
  </div>
);

export default function Example() {
  return render();
}

Props

Name	Type	Default	Description
Trigger.size	sm \| default	default	sm \| default. Size variant of the select trigger