Select

Displays a list of options for the user to pick from—triggered by a button.

import { Select } from "@smartacteam/ambient-web/select";

const fonts = [
  { label: "Select font", value: null },
  { label: "Sans-serif", value: "sans" },
  { label: "Serif", value: "serif" },
  { label: "Monospace", value: "mono" },
  { label: "Cursive", value: "cursive" },
];

export function SelectDemo() {
  return (
    <Select.Root items={fonts} defaultValue={null}>
      <Select.Trigger className="w-45">
        <Select.Value />
      </Select.Trigger>
      <Select.Content>
        <Select.Group>
          {fonts.map((font) => (
            <Select.Item key={font.value ?? font.label} value={font.value}>
              {font.label}
            </Select.Item>
          ))}
        </Select.Group>
      </Select.Content>
    </Select.Root>
  );
}

Usage

import { Select } from "@smartacteam/ambient-web/select";
 
const fonts = [
  { label: "Select font", value: null },
  { label: "Sans-serif", value: "sans" },
  { label: "Serif", value: "serif" },
  { label: "Monospace", value: "mono" },
  { label: "Cursive", value: "cursive" },
];

<Select.Root>
  <Select.Trigger className="w-45">
    <Select.Value />
  </Select.Trigger>
  <Select.Content>
    <Select.Item value="light">Light</Select.Item>
    <Select.Item value="dark">Dark</Select.Item>
    <Select.Item value="system">System</Select.Item>
  </Select.Content>
</Select.Root>

Examples

Sizes

"use client";

import { Select } from "@smartacteam/ambient-web/select";

const fonts = [
  { label: "Select font", value: null },
  { label: "Sans-serif", value: "sans" },
  { label: "Serif", value: "serif" },
  { label: "Monospace", value: "mono" },
  { label: "Cursive", value: "cursive" },
];

export function SelectSizesDemo() {
  return (
    <div className="flex w-full flex-col gap-8">
      <Select.Root items={fonts} defaultValue={null}>
        <Select.Trigger size="default" className="w-45">
          <Select.Value />
        </Select.Trigger>
        <Select.Content>
          <Select.Group>
            {fonts.map((font) => (
              <Select.Item key={font.value ?? font.label} value={font.value}>
                {font.label}
              </Select.Item>
            ))}
          </Select.Group>
        </Select.Content>
      </Select.Root>
      <Select.Root items={fonts} defaultValue={null}>
        <Select.Trigger size="lg" className="w-45">
          <Select.Value />
        </Select.Trigger>
        <Select.Content>
          <Select.Group>
            {fonts.map((font) => (
              <Select.Item key={font.value ?? font.label} value={font.value}>
                {font.label}
              </Select.Item>
            ))}
          </Select.Group>
        </Select.Content>
      </Select.Root>
    </div>
  );
}

Scrollable

"use client";

import * as React from "react";

import { Select } from "@smartacteam/ambient-web/select";

export function SelectScrollable() {
  const items = React.useMemo(
    () => [
      { label: "Select an item", value: null },
      ...Array.from({ length: 100 }).map((_, i) => ({
        label: `Item ${i}`,
        value: `item-${i}`,
      })),
    ],
    [],
  );

  return (
    <Select.Root items={items}>
      <Select.Trigger className="w-84">
        <Select.Value />
      </Select.Trigger>
      <Select.Content>
        <Select.Group>
          {items.map((item) => (
            <Select.Item key={item.value} value={item.value}>
              {item.label}
            </Select.Item>
          ))}
        </Select.Group>
      </Select.Content>
    </Select.Root>
  );
}

Multiple

Pass multiple to Select.Root to let the user pick several values. The popup stays open while toggling items, each selected item shows a checkmark, and Select.Value renders the selected labels. Provide items on the root so the trigger can resolve labels from values.

"use client";

import { Select } from "@smartacteam/ambient-web/select";

const zones = [
  { label: "Upstairs", value: "upstairs" },
  { label: "Downstairs", value: "downstairs" },
  { label: "Garage", value: "garage" },
  { label: "Attic", value: "attic" },
];

export function SelectMultipleDemo() {
  return (
    <Select.Root multiple items={zones} defaultValue={["upstairs", "garage"]}>
      <Select.Trigger className="w-60">
        <Select.Value placeholder="Select zones" />
      </Select.Trigger>
      <Select.Content>
        <Select.Group>
          {zones.map((zone) => (
            <Select.Item key={zone.value} value={zone.value}>
              {zone.label}
            </Select.Item>
          ))}
        </Select.Group>
      </Select.Content>
    </Select.Root>
  );
}

Count badge

Swap Select.Value for Select.CountValue to lead the trigger with a count Badge. The badge is shrink-0, so it stays pinned while long selections ellipsize — the number selected is always visible. Labels resolve from the root's items, same as Select.Value, so no extra wiring is needed.

"use client";

import { Select } from "@smartacteam/ambient-web/select";

const zones = [
  { label: "Upstairs", value: "upstairs" },
  { label: "Downstairs", value: "downstairs" },
  { label: "Garage", value: "garage" },
  { label: "Attic", value: "attic" },
];

export function SelectMultipleCountDemo() {
  return (
    <Select.Root
      multiple
      items={zones}
      defaultValue={["upstairs", "garage", "attic"]}
    >
      <Select.Trigger className="w-60">
        <Select.CountValue placeholder="Select zones" />
      </Select.Trigger>
      <Select.Content>
        <Select.Group>
          {zones.map((zone) => (
            <Select.Item key={zone.value} value={zone.value}>
              {zone.label}
            </Select.Item>
          ))}
        </Select.Group>
      </Select.Content>
    </Select.Root>
  );
}

Forward badgeProps to recolor the badge (e.g. badgeProps={{ color: "success" }}). For a fully custom summary — a "3 selected" string, an overflow +N — pass a render function to Select.Value instead.