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>
        {fonts.map((font) => (
          <Select.Item key={font.value ?? font.label} value={font.value}>
            {font.label}
          </Select.Item>
        ))}
      </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>
          {fonts.map((font) => (
            <Select.Item key={font.value ?? font.label} value={font.value}>
              {font.label}
            </Select.Item>
          ))}
        </Select.Content>
      </Select.Root>
      <Select.Root items={fonts} defaultValue={null}>
        <Select.Trigger size="lg" className="w-45">
          <Select.Value />
        </Select.Trigger>
        <Select.Content>
          {fonts.map((font) => (
            <Select.Item key={font.value ?? font.label} value={font.value}>
              {font.label}
            </Select.Item>
          ))}
        </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>
        {items.map((item) => (
          <Select.Item key={item.value} value={item.value}>
            {item.label}
          </Select.Item>
        ))}
      </Select.Content>
    </Select.Root>
  );
}

Grouped

Wrap related items in a Select.Group with a Select.GroupLabel — the label is announced as the group's name by screen readers. Grouping expresses structure, not spacing (see Styling), so put a Select.Separator between adjacent groups to draw the boundary.

import { Fragment } from "react";

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

const groups = [
  {
    heading: "Sans serif",
    items: [
      { label: "Helvetica", value: "helvetica" },
      { label: "Inter", value: "inter" },
    ],
  },
  {
    heading: "Serif",
    items: [
      { label: "Georgia", value: "georgia" },
      { label: "Tiempos", value: "tiempos" },
    ],
  },
];

const fonts = groups.flatMap((group) => group.items);

export function SelectGroupedDemo() {
  return (
    <Select.Root items={fonts} defaultValue={null}>
      <Select.Trigger className="w-45">
        <Select.Value placeholder="Select font" />
      </Select.Trigger>
      <Select.Content>
        {groups.map((group, i) => (
          <Fragment key={group.heading}>
            {i > 0 && <Select.Separator />}
            <Select.Group>
              <Select.GroupLabel>{group.heading}</Select.GroupLabel>
              {group.items.map((font) => (
                <Select.Item key={font.value} value={font.value}>
                  {font.label}
                </Select.Item>
              ))}
            </Select.Group>
          </Fragment>
        ))}
      </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>
        {zones.map((zone) => (
          <Select.Item key={zone.value} value={zone.value}>
            {zone.label}
          </Select.Item>
        ))}
      </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>
        {zones.map((zone) => (
          <Select.Item key={zone.value} value={zone.value}>
            {zone.label}
          </Select.Item>
        ))}
      </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.

Size-varying states

A spacing override applies to every state, including the one you were not looking at. See Styling.

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

const configs = [
  { label: "Production", value: "prod" },
  { label: "Staging", value: "stage" },
];

/**
 * One override, both states — which is the shape of the bug this guards.
 *
 * An author sizes the trigger so a two-line value doesn't tower, and the same
 * `className` silently applies to the one-line state they never looked at
 * (PA-2019). `min-h-9` is the companion that keeps the collapsed state at
 * control height while letting the expanded one grow.
 *
 * Deliberately declared once and used by both triggers: if the two states
 * carried separate classes, dropping `min-h-9` from one could not affect the
 * other, and the demo would prove nothing.
 */
const TRIGGER = "h-auto min-h-9 w-45 py-1.5";

export function SelectTriggerStatesDemo() {
  return (
    <div className="flex w-full flex-col gap-4">
      <div
        data-control-row="select-trigger-collapsed"
        data-row-kind="equal"
        className="flex flex-wrap items-start gap-2"
      >
        {/* The state the override was not written for. It has to keep the
            height of the input beside it. */}
        <Select.Root items={configs} defaultValue="prod">
          <Select.Trigger data-control className={TRIGGER}>
            <Select.Value />
          </Select.Trigger>
        </Select.Root>
        <Input.Text data-control placeholder="Reference input" />
      </div>

      <div
        data-control-row="select-trigger-expanded"
        data-row-kind="grows"
        className="flex flex-wrap items-start gap-2"
      >
        <Select.Root items={configs} defaultValue="prod">
          <Select.Trigger data-control-subject className={TRIGGER}>
            <span className="flex flex-col items-start leading-tight">
              <span>Production</span>
              <span className="text-xs text-text-secondary">
                cfg-8241-ab99-01
              </span>
            </span>
          </Select.Trigger>
        </Select.Root>
        <Input.Text data-control placeholder="Reference input" />
      </div>
    </div>
  );
}