Zentauri UI
Forms

Select for option lists

Select surfaces help users pick one or many values from structured lists. Use them in React forms and Next.js settings pages where native selects fall short on styling or behavior.

Examples

Single-select, multi-select, and controlled value patterns with trigger and content variants.

Select variants examples

Trigger uses CVA variant and size; the list panel uses appearance and size on SelectContent. Each snippet starts with a Variant: lead-in.

Select · multi, controlled value + onChange

SelectContent · Appearance · glass, Size · sm, Spacing · default

SelectContent · Appearance · glass, Size · md, Spacing · default

SelectContent · Appearance · glass, Size · lg, Spacing · default

SelectContent · Appearance · sky, Size · md, Spacing · none

SelectContent · Appearance · sky, Size · md, Spacing · default

SelectContent · Appearance · sky, Size · md, Spacing · sm

SelectContent · Appearance · sky, Size · md, Spacing · md

SelectContent · Appearance · sky, Size · md, Spacing · lg

SelectContent · Appearance · sky, Size · md, Spacing · xl

What it does

Compound parts separate triggers, portals, and listboxes.

Keep option text concise to preserve scan speed.

Composition and API

Prefer compound subcomponents instead of one oversized prop bag. Export a small, documented API for your design system.

Announce selection changes when they drive expensive remote fetches.

Common use cases

  • Choose tenants or projects in admin shells.
  • Pick assignees on issue forms.
  • Filter charts by dimension values.
  • Configure feature flags with grouped options.

Accessibility

Keyboard order, focus rings, and ARIA attributes should match production usage. Test with your supported browsers and assistive technologies when semantics are non-trivial.

This preview page exposes a single h1 in the hero for a clean outline.

Next.js integration notes

Colocate examples under the App Router, keep server and client boundaries explicit, and avoid pulling interactive overlays into unexpected server layouts.

Set NEXT_PUBLIC_SITE_URL so canonical and Open Graph URLs resolve on deploy.

FAQ

Does the Select component work with Next.js App Router?

Yes. Import it like any other React component; keep interactive subtrees in client components when you need hooks or browser APIs, and leave static structure in server components where possible.

Can I customize select with Tailwind CSS?

Zentauri UI exposes class-friendly variants and slots so you can extend styles with Tailwind utilities without fighting inline styles.

Is this Select implementation accessible by default?

Primitives follow sensible defaults, but accessibility depends on how you label controls, manage focus, and wire keyboard handlers in your app. Validate critical flows with keyboard-only use and screen readers.