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>
  );
}