Select

In FORMA

• Liegt in kit/arc/select und ist über @/forma/arc/select/select erreichbar.
• Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.
• Das Kit nutzt ihn als Select aus @/forma/ui/select — mit shadcns API, damit Module, Blöcke und Apps unverändert bleiben; die Charakter-Achsen der Richtung liegen darüber.

When to use

• A short fixed list where typing is not needed, such as region or sort order.
• Form fields that should submit natively through Radix's hidden select via name.

When not to use

• Use combobox for long or searchable lists.
• Use multi-select when several values can be chosen.
• Use segmented-control for two to four choices that should stay visible.

Usage

import { Select } from "@/forma/arc/select/select";

export function RegionSelect() {
  const [region, setRegion] = useState("eu");
  return (
    <Select
      label="Region"
      value={region}
      onValueChange={setRegion}
      options={[
        { value: "us", label: "United States" },
        { value: "eu", label: "Europe" },
        { value: "ap", label: "Asia Pacific", disabled: true },
      ]}
    />
  );
}

API reference

Select

A labelled Radix select whose shown value rolls in the direction of the list.

Keyboard interactions

Accessibility

• Built on Radix Select, so the trigger, listbox, and options get the right roles and focus handling.
• The real value renders in a visually hidden Radix Value; the animated copy is aria-hidden.
• Label is linked with htmlFor, and description through aria-describedby.

Motion

• A later option rises in from below and an earlier one drops from above, with a soft blur.
• Reduced motion swaps the value with an instant crossfade.

Responsive behavior

• The menu matches the trigger width, caps at min(24rem, 100vw minus 20px), and at 320px or the available height, then scrolls.
• Long labels ellipsize in the trigger instead of widening it.
• The trigger never scales on press, so Radix measures a stable anchor on touch.

Performance

• The menu renders in a Radix portal only while open; items are not virtualized, so keep the list short.
• The translucent menu drops its backdrop blur under prefers-reduced-transparency.

Notes for AI

• Pick for a short fixed list where typing is not needed. Use combobox for long or searchable lists, multi-select for several values, and segmented-control for two to four visible choices.
• Controlled with value and onValueChange, or uncontrolled with defaultValue; pass name to submit with a form.

Related

• Combobox: Search and select from a list without leaving the field.
• Multi-select: Select several values while keeping the field readable.
• Segmented control: Switch between a small set of related views.
• Radio group: Choose one option from a visible set.

Also in selects

• Morph select: A select whose trigger grows into the list, with a gliding highlight and type-ahead.
• Chip group: Filter by a few facets with chips that morph as you pick them.

Guidance for AI tools

Select: A compact choice field with a keyboard friendly menu. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt