Kaufmann Commerce UI / Kaufmann primitive

Select

A React Aria select with a Kaufmann trigger, popover, listbox, keyboard model, and explicit option states.

Field layouts

Stacked for forms, inline for compact settings, and condensed for toolbars or dense commerce surfaces.

Live specimen

Stacked field

CountryDetermines available shipping methods.

Inline setting

Language

Form states

Placeholder, required, validation, and disabled states remain explicit and accessible.

Live specimen

Shipping country

Shipping countryThis destination is unavailable for the current offer.

Shipping countryLocked by the active checkout session.

One interaction language

The trigger uses the same borders, focus ring, type, radii, and timing tokens as Kaufmann Button. React Aria supplies selection semantics, keyboard navigation, focus management, and the accessible popover relationship.

Astro

---
import { Select } from "@kaufmann/ui";
---

<Select
  client:load
  label="Country"
  defaultValue="AT"
  description="Determines the shipping zone."
  options={countries}
/>