Brand logoentauri

Add this component

npx zentauri-ui add select

Accessibility notes

Keyboard accessible controls with labels, focus-visible rings, and state attributes. Keep visible labels or aria-labels when copying snippets.

Dependency notes

Check Installation for shared peers. This component keeps styling in Tailwind classes and the --zui-* token contract.

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 playground

Pick a trigger variant and size, plus the content appearance, size, and spacing to preview the select live. Toggle Show output / Show code and the snippet updates to match the selected variant.

Multi-select (controlled value + onChange)

Select · multi, controlled value + onChange

Select API

Generated from the package prop types and variant definitions.

Select

SelectProps

State

PropTypeDefault
defaultValuestring[] | undefinednone
valuestring[] | undefinednone

Behavior

PropTypeDefault
multipleboolean | undefinednone
onChange((value: string[]) => void) | undefinednone
triggerIdstring | undefinednone

Content

PropTypeDefault
children*ReactNodenone
Inherited HTML props
PropTypeDefault
classNamestring | undefinednone

SelectContent

SelectContentProps

Variants

PropTypeDefault
appearance
aquabluecrimsoncyandefaultelectricemeraldforestghostglassgradient-bluegradient-green+31
default
size
lgmdsm
md
spacing
defaultlgmdnonesmxl
default
Inherited HTML props
PropTypeDefault
childrenReactNodenone
classNamestring | undefinednone
idstring | undefinednone
onClickMouseEventHandler<HTMLDivElement> | undefinednone
styleCSSProperties | undefinednone
titlestring | undefinednone

SelectItem

SelectItemProps

Variants

PropTypeDefault
appearance
aquabluecrimsoncyandefaultelectricemeraldforestghostglassgradient-bluegradient-green+31
default
disabled
true
none

State

PropTypeDefault
value*stringnone

Content

PropTypeDefault
childrenReactNodenone
Inherited HTML props
PropTypeDefault
classNamestring | undefinednone
idstring | undefinednone
onClickMouseEventHandler<HTMLDivElement> | undefinednone
styleCSSProperties | undefinednone
titlestring | undefinednone

SelectTrigger

SelectTriggerProps

Variants

PropTypeDefault
size
lgmdsm
md
variant
aquabluecrimsoncyandefaultelectricemeraldforestghostglassgradient-bluegradient-green+31
default
Inherited HTML props
PropTypeDefault
childrenReactNodenone
classNamestring | undefinednone
idstring | undefinednone
onClickMouseEventHandler<HTMLButtonElement> | undefinednone
styleCSSProperties | undefinednone
titlestring | undefinednone

SelectValue

SelectValueProps

Behavior

PropTypeDefault
placeholderReactNodenone
Inherited HTML props
PropTypeDefault
childrenReactNodenone
classNamestring | undefinednone
idstring | undefinednone
onClickMouseEventHandler<HTMLSpanElement> | undefinednone
styleCSSProperties | undefinednone
titlestring | undefinednone
CSS variable overrides

Select CSS variables

Override these select variables on :root, a theme selector, or a component wrapper.

744 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-select-trigger-ring-focus: oklch(44.6% 0.03 256.802);
  --zui-select-trigger-default-border: oklch(87.2% 0.01 258.338);
  --zui-select-trigger-default-bg: #ffffff;
  --zui-select-trigger-default-fg: oklch(13% 0.028 261.692);
  --zui-select-trigger-outline-border: oklch(55.1% 0.027 264.364);
  --zui-select-trigger-outline-fg: oklch(13% 0.028 261.692);
  --zui-select-trigger-ghost-border: transparent;
  --zui-select-trigger-ghost-fg: oklch(13% 0.028 261.692);
  --zui-select-trigger-sky-border: oklch(44.3% 0.11 240.79);
  --zui-select-trigger-sky-fg: oklch(29.3% 0.066 243.157);
  --zui-select-trigger-rose-border: oklch(45.5% 0.188 13.697);
  --zui-select-trigger-rose-fg: oklch(27.1% 0.105 12.094);
  --zui-select-trigger-purple-border: oklch(43.8% 0.218 303.724);
  --zui-select-trigger-purple-fg: oklch(29.1% 0.149 302.717);
  --zui-select-trigger-pink-border: oklch(45.9% 0.187 3.815);
  --zui-select-trigger-pink-fg: oklch(28.4% 0.109 3.907);
  --zui-select-trigger-orange-border: oklch(47% 0.157 37.304);
  --zui-select-trigger-orange-fg: oklch(26.6% 0.079 36.259);
  --zui-select-trigger-yellow-border: oklch(47.6% 0.114 61.907);
  --zui-select-trigger-yellow-fg: oklch(28.6% 0.066 53.813);
  --zui-select-trigger-teal-border: oklch(43.7% 0.078 188.216);
  --zui-select-trigger-teal-fg: oklch(27.7% 0.046 192.524);
  --zui-select-trigger-indigo-border: oklch(58.5% 0.233 277.117);
  --zui-select-trigger-indigo-fg: oklch(25.7% 0.09 281.288);
  --zui-select-trigger-emerald-border: oklch(43.2% 0.095 166.913);
  --zui-select-trigger-emerald-fg: oklch(26.2% 0.051 172.552);
  --zui-select-trigger-glass-border: #00000026;
  --zui-select-trigger-glass-bg: #0000001a;
  --zui-select-trigger-glass-fg: oklch(13% 0.028 261.692);
  --zui-select-trigger-gradient-blue-from: oklch(37.9% 0.146 265.522);
  --zui-select-trigger-gradient-blue-to: oklch(38.1% 0.176 304.987);
  --zui-select-trigger-gradient-blue-fg: #ffffff;
  --zui-select-trigger-gradient-green-from: oklch(39.3% 0.095 152.535);
  --zui-select-trigger-gradient-green-to: oklch(40.5% 0.101 131.063);
  --zui-select-trigger-gradient-green-fg: #ffffff;
  --zui-select-trigger-gradient-red-from: oklch(39.6% 0.141 25.723);
  --zui-select-trigger-gradient-red-to: oklch(40.8% 0.153 2.432);
  --zui-select-trigger-gradient-red-fg: #ffffff;
  --zui-select-trigger-gradient-yellow-from: oklch(42.1% 0.095 57.708);
  --zui-select-trigger-gradient-yellow-to: oklch(40.8% 0.123 38.172);
  --zui-select-trigger-gradient-yellow-fg: #ffffff;
  --zui-select-trigger-gradient-purple-from: oklch(38.1% 0.176 304.987);
  --zui-select-trigger-gradient-purple-to: oklch(40.8% 0.153 2.432);
  --zui-select-trigger-gradient-purple-fg: #ffffff;
  --zui-select-trigger-gradient-teal-from: oklch(38.6% 0.063 188.416);
  --zui-select-trigger-gradient-teal-to: oklch(39.8% 0.07 227.392);
  --zui-select-trigger-gradient-teal-fg: #ffffff;
  --zui-select-trigger-gradient-indigo-from: oklch(35.9% 0.144 278.697);
  --zui-select-trigger-gradient-indigo-to: oklch(38.1% 0.176 304.987);
  --zui-select-trigger-gradient-indigo-fg: #ffffff;
  --zui-select-trigger-gradient-pink-from: oklch(40.8% 0.153 2.432);
  --zui-select-trigger-gradient-pink-to: oklch(41% 0.159 10.272);
  --zui-select-trigger-gradient-pink-fg: #ffffff;
  --zui-select-trigger-gradient-orange-from: oklch(40.8% 0.123 38.172);
  --zui-select-trigger-gradient-orange-to: oklch(39.6% 0.141 25.723);
  --zui-select-trigger-gradient-orange-fg: #ffffff;
  --zui-select-trigger-blue-border: #2563eb;
  --zui-select-trigger-blue-fg: #2563eb;
  --zui-select-trigger-blue-bg-hover: #2563eb14;
  --zui-select-trigger-cyan-border: #0891b2;
  --zui-select-trigger-cyan-fg: #0891b2;
  --zui-select-trigger-cyan-bg-hover: #0891b214;
  --zui-select-trigger-green-border: #16a34a;
  --zui-select-trigger-green-fg: #16a34a;
  --zui-select-trigger-green-bg-hover: #16a34a14;
  --zui-select-trigger-lime-border: #65a30d;
  --zui-select-trigger-lime-fg: #65a30d;
  --zui-select-trigger-lime-bg-hover: #65a30d14;
  --zui-select-trigger-mint-border: #10b981;
  --zui-select-trigger-mint-fg: #10b981;
  --zui-select-trigger-mint-bg-hover: #10b98114;
  --zui-select-trigger-ocean-border: #0284c7;
  --zui-select-trigger-ocean-fg: #0284c7;
  --zui-select-trigger-ocean-bg-hover: #0284c714;
  --zui-select-trigger-sapphire-border: #1d4ed8;
  --zui-select-trigger-sapphire-fg: #1d4ed8;
  --zui-select-trigger-sapphire-bg-hover: #1d4ed814;
  --zui-select-trigger-lavender-border: #8b5cf6;
  --zui-select-trigger-lavender-fg: #8b5cf6;
  --zui-select-trigger-lavender-bg-hover: #8b5cf614;
  --zui-select-trigger-ruby-border: #be123c;
  --zui-select-trigger-ruby-fg: #be123c;
  --zui-select-trigger-ruby-bg-hover: #be123c14;
  --zui-select-trigger-red-border: #dc2626;
  --zui-select-trigger-red-fg: #dc2626;
  --zui-select-trigger-red-bg-hover: #dc262614;
  --zui-select-trigger-slate-border: #475569;
  --zui-select-trigger-slate-fg: #475569;
  --zui-select-trigger-slate-bg-hover: #47556914;
  --zui-select-trigger-zinc-border: #52525b;
  --zui-select-trigger-zinc-fg: #52525b;
  --zui-select-trigger-zinc-bg-hover: #52525b14;
  --zui-select-trigger-stone-border: #57534e;
  --zui-select-trigger-stone-fg: #57534e;
  --zui-select-trigger-stone-bg-hover: #57534e14;
  --zui-select-trigger-royal-border: #4338ca;
  --zui-select-trigger-royal-fg: #4338ca;
  --zui-select-trigger-royal-bg-hover: #4338ca14;
  --zui-select-trigger-electric-border: #0ea5e9;
  --zui-select-trigger-electric-fg: #0ea5e9;
  --zui-select-trigger-electric-bg-hover: #0ea5e914;
  --zui-select-trigger-forest-border: #166534;
  --zui-select-trigger-forest-fg: #166534;
  --zui-select-trigger-forest-bg-hover: #16653414;
  --zui-select-trigger-sunset-border: #ea580c;
  --zui-select-trigger-sunset-fg: #ea580c;
  --zui-select-trigger-sunset-bg-hover: #ea580c14;
  --zui-select-trigger-magenta-border: #c026d3;
  --zui-select-trigger-magenta-fg: #c026d3;
  --zui-select-trigger-magenta-bg-hover: #c026d314;
  --zui-select-trigger-crimson-border: #b91c1c;
  --zui-select-trigger-crimson-fg: #b91c1c;
  --zui-select-trigger-crimson-bg-hover: #b91c1c14;
  --zui-select-trigger-aqua-border: #0f766e;
  --zui-select-trigger-aqua-fg: #0f766e;
  --zui-select-trigger-aqua-bg-hover: #0f766e14;
  --zui-select-trigger-plum-border: #7e22ce;
  --zui-select-trigger-plum-fg: #7e22ce;
  --zui-select-trigger-plum-bg-hover: #7e22ce14;
  --zui-select-item-ring-focus: oklch(44.6% 0.03 256.802);
  --zui-select-item-default-bg: #ffffff;
  --zui-select-item-default-fg: oklch(21% 0.034 264.665);
  --zui-select-item-glass-bg: #0000001a;
  --zui-select-item-glass-fg: oklch(37.3% 0.034 259.733);
  --zui-select-item-outline-border: oklch(55.1% 0.027 264.364);
  --zui-select-item-outline-fg: oklch(21% 0.034 264.665);
  --zui-select-item-outline-bg: oklch(92.8% 0.006 264.531);
  --zui-select-item-ghost-border: transparent;
  --zui-select-item-ghost-fg: oklch(21% 0.034 264.665);
  --zui-select-item-ghost-bg: transparent;
  --zui-select-item-sky-border: oklch(39.1% 0.09 240.876);
  --zui-select-item-sky-fg: oklch(39.1% 0.09 240.876);
  --zui-select-item-sky-bg: oklch(90.1% 0.058 230.902);
  --zui-select-item-rose-border: oklch(41% 0.159 10.272);
  --zui-select-item-rose-fg: oklch(41% 0.159 10.272);
  --zui-select-item-rose-bg: oklch(89.2% 0.058 10.001);
  --zui-select-item-purple-border: oklch(38.1% 0.176 304.987);
  --zui-select-item-purple-fg: oklch(38.1% 0.176 304.987);
  --zui-select-item-purple-bg: oklch(90.2% 0.063 306.703);
  --zui-select-item-pink-border: oklch(40.8% 0.153 2.432);
  --zui-select-item-pink-fg: oklch(40.8% 0.153 2.432);
  --zui-select-item-pink-bg: oklch(89.9% 0.061 343.231);
  --zui-select-item-orange-border: oklch(40.8% 0.123 38.172);
  --zui-select-item-orange-fg: oklch(40.8% 0.123 38.172);
  --zui-select-item-orange-bg: oklch(90.1% 0.076 70.697);
  --zui-select-item-yellow-border: oklch(42.1% 0.095 57.708);
  --zui-select-item-yellow-fg: oklch(42.1% 0.095 57.708);
  --zui-select-item-yellow-bg: oklch(94.5% 0.129 101.54);
  --zui-select-item-teal-border: oklch(38.6% 0.063 188.416);
  --zui-select-item-teal-fg: oklch(38.6% 0.063 188.416);
  --zui-select-item-teal-bg: oklch(91% 0.096 180.426);
  --zui-select-item-indigo-border: oklch(35.9% 0.144 278.697);
  --zui-select-item-indigo-fg: oklch(35.9% 0.144 278.697);
  --zui-select-item-indigo-bg: oklch(87% 0.065 274.039);
  --zui-select-item-emerald-border: oklch(37.8% 0.077 168.94);
  --zui-select-item-emerald-fg: oklch(37.8% 0.077 168.94);
  --zui-select-item-emerald-bg: oklch(90.5% 0.093 164.15);
  --zui-select-item-gradient-blue-bg: transparent;
  --zui-select-item-gradient-blue-fg: oklch(97% 0.014 254.604);
  --zui-select-item-gradient-blue-from: oklch(97% 0.014 254.604);
  --zui-select-item-gradient-blue-to: oklch(97.7% 0.014 308.299);
  --zui-select-item-gradient-green-bg: transparent;
  --zui-select-item-gradient-green-fg: oklch(98.2% 0.018 155.826);
  --zui-select-item-gradient-green-from: oklch(98.2% 0.018 155.826);
  --zui-select-item-gradient-green-to: oklch(98.6% 0.031 120.757);
  --zui-select-item-gradient-red-bg: transparent;
  --zui-select-item-gradient-red-fg: oklch(97.1% 0.013 17.38);
  --zui-select-item-gradient-red-from: oklch(97.1% 0.013 17.38);
  --zui-select-item-gradient-red-to: oklch(97.1% 0.014 343.198);
  --zui-select-item-gradient-yellow-bg: transparent;
  --zui-select-item-gradient-yellow-fg: oklch(98.7% 0.026 102.212);
  --zui-select-item-gradient-yellow-from: oklch(98.7% 0.026 102.212);
  --zui-select-item-gradient-yellow-to: oklch(98% 0.016 73.684);
  --zui-select-item-gradient-purple-bg: transparent;
  --zui-select-item-gradient-purple-fg: oklch(97.7% 0.014 308.299);
  --zui-select-item-gradient-purple-from: oklch(97.7% 0.014 308.299);
  --zui-select-item-gradient-purple-to: oklch(97.1% 0.014 343.198);
  --zui-select-item-gradient-teal-bg: transparent;
  --zui-select-item-gradient-teal-fg: oklch(98.4% 0.014 180.72);
  --zui-select-item-gradient-teal-from: oklch(98.4% 0.014 180.72);
  --zui-select-item-gradient-teal-to: oklch(98.4% 0.019 200.873);
  --zui-select-item-gradient-indigo-bg: transparent;
  --zui-select-item-gradient-indigo-fg: oklch(96.2% 0.018 272.314);
  --zui-select-item-gradient-indigo-from: oklch(96.2% 0.018 272.314);
  --zui-select-item-gradient-indigo-to: oklch(97.7% 0.014 308.299);
  --zui-select-item-gradient-pink-bg: transparent;
  --zui-select-item-gradient-pink-fg: oklch(97.1% 0.014 343.198);
  --zui-select-item-gradient-pink-from: oklch(97.1% 0.014 343.198);
  --zui-select-item-gradient-pink-to: oklch(96.9% 0.015 12.422);
  --zui-select-item-gradient-orange-bg: transparent;
  --zui-select-item-gradient-orange-fg: oklch(98% 0.016 73.684);
  --zui-select-item-gradient-orange-from: oklch(98% 0.016 73.684);
  --zui-select-item-gradient-orange-to: oklch(97.1% 0.013 17.38);
  --zui-select-item-blue-bg-hover: #2563eb18;
  --zui-select-item-blue-fg-hover: #2563eb;
  --zui-select-item-blue-bg: #2563eb10;
  --zui-select-item-blue-fg: #2563eb;
  --zui-select-item-cyan-bg-hover: #0891b218;
  --zui-select-item-cyan-fg-hover: #0891b2;
  --zui-select-item-cyan-bg: #0891b210;
  --zui-select-item-cyan-fg: #0891b2;
  --zui-select-item-green-bg-hover: #16a34a18;
  --zui-select-item-green-fg-hover: #16a34a;
  --zui-select-item-green-bg: #16a34a10;
  --zui-select-item-green-fg: #16a34a;
  --zui-select-item-lime-bg-hover: #65a30d18;
  --zui-select-item-lime-fg-hover: #65a30d;
  --zui-select-item-lime-bg: #65a30d10;
  --zui-select-item-lime-fg: #65a30d;
  --zui-select-item-mint-bg-hover: #10b98118;
  --zui-select-item-mint-fg-hover: #10b981;
  --zui-select-item-mint-bg: #10b98110;
  --zui-select-item-mint-fg: #10b981;
  --zui-select-item-ocean-bg-hover: #0284c718;
  --zui-select-item-ocean-fg-hover: #0284c7;
  --zui-select-item-ocean-bg: #0284c710;
  --zui-select-item-ocean-fg: #0284c7;
  --zui-select-item-sapphire-bg-hover: #1d4ed818;
  --zui-select-item-sapphire-fg-hover: #1d4ed8;
  --zui-select-item-sapphire-bg: #1d4ed810;
  --zui-select-item-sapphire-fg: #1d4ed8;
  --zui-select-item-lavender-bg-hover: #8b5cf618;
  --zui-select-item-lavender-fg-hover: #8b5cf6;
  --zui-select-item-lavender-bg: #8b5cf610;
  --zui-select-item-lavender-fg: #8b5cf6;
  --zui-select-item-ruby-bg-hover: #be123c18;
  --zui-select-item-ruby-fg-hover: #be123c;
  --zui-select-item-ruby-bg: #be123c10;
  --zui-select-item-ruby-fg: #be123c;
  --zui-select-item-red-bg-hover: #dc262618;
  --zui-select-item-red-fg-hover: #dc2626;
  --zui-select-item-red-bg: #dc262610;
  --zui-select-item-red-fg: #dc2626;
  --zui-select-item-slate-bg-hover: #47556918;
  --zui-select-item-slate-fg-hover: #475569;
  --zui-select-item-slate-bg: #47556910;
  --zui-select-item-slate-fg: #475569;
  --zui-select-item-zinc-bg-hover: #52525b18;
  --zui-select-item-zinc-fg-hover: #52525b;
  --zui-select-item-zinc-bg: #52525b10;
  --zui-select-item-zinc-fg: #52525b;
  --zui-select-item-stone-bg-hover: #57534e18;
  --zui-select-item-stone-fg-hover: #57534e;
  --zui-select-item-stone-bg: #57534e10;
  --zui-select-item-stone-fg: #57534e;
  --zui-select-item-royal-bg-hover: #4338ca18;
  --zui-select-item-royal-fg-hover: #4338ca;
  --zui-select-item-royal-bg: #4338ca10;
  --zui-select-item-royal-fg: #4338ca;
  --zui-select-item-electric-bg-hover: #0ea5e918;
  --zui-select-item-electric-fg-hover: #0ea5e9;
  --zui-select-item-electric-bg: #0ea5e910;
  --zui-select-item-electric-fg: #0ea5e9;
  --zui-select-item-forest-bg-hover: #16653418;
  --zui-select-item-forest-fg-hover: #166534;
  --zui-select-item-forest-bg: #16653410;
  --zui-select-item-forest-fg: #166534;
  --zui-select-item-sunset-bg-hover: #ea580c18;
  --zui-select-item-sunset-fg-hover: #ea580c;
  --zui-select-item-sunset-bg: #ea580c10;
  --zui-select-item-sunset-fg: #ea580c;
  --zui-select-item-magenta-bg-hover: #c026d318;
  --zui-select-item-magenta-fg-hover: #c026d3;
  --zui-select-item-magenta-bg: #c026d310;
  --zui-select-item-magenta-fg: #c026d3;
  --zui-select-item-crimson-bg-hover: #b91c1c18;
  --zui-select-item-crimson-fg-hover: #b91c1c;
  --zui-select-item-crimson-bg: #b91c1c10;
  --zui-select-item-crimson-fg: #b91c1c;
  --zui-select-item-aqua-bg-hover: #0f766e18;
  --zui-select-item-aqua-fg-hover: #0f766e;
  --zui-select-item-aqua-bg: #0f766e10;
  --zui-select-item-aqua-fg: #0f766e;
  --zui-select-item-plum-bg-hover: #7e22ce18;
  --zui-select-item-plum-fg-hover: #7e22ce;
  --zui-select-item-plum-bg: #7e22ce10;
  --zui-select-item-plum-fg: #7e22ce;
  --zui-select-content-bg: #ffffff;
  --zui-select-content-default-bg: #ffffff;
  --zui-select-content-glass-bg: #0000001a;
  --zui-select-content-outline-border: oklch(55.1% 0.027 264.364);
  --zui-select-content-ghost-border: transparent;
  --zui-select-content-sky-border: oklch(39.1% 0.09 240.876);
  --zui-select-content-rose-border: oklch(41% 0.159 10.272);
  --zui-select-content-purple-border: oklch(38.1% 0.176 304.987);
  --zui-select-content-pink-border: oklch(40.8% 0.153 2.432);
  --zui-select-content-orange-border: oklch(40.8% 0.123 38.172);
  --zui-select-content-yellow-border: oklch(42.1% 0.095 57.708);
  --zui-select-content-teal-border: oklch(38.6% 0.063 188.416);
  --zui-select-content-indigo-border: oklch(35.9% 0.144 278.697);
  --zui-select-content-emerald-border: oklch(37.8% 0.077 168.94);
  --zui-select-content-gradient-blue-from: oklch(37.9% 0.146 265.522);
  --zui-select-content-gradient-blue-to: oklch(38.1% 0.176 304.987);
  --zui-select-content-gradient-green-from: oklch(39.3% 0.095 152.535);
  --zui-select-content-gradient-green-to: oklch(40.5% 0.101 131.063);
  --zui-select-content-gradient-red-from: oklch(39.6% 0.141 25.723);
  --zui-select-content-gradient-red-to: oklch(40.8% 0.153 2.432);
  --zui-select-content-gradient-yellow-from: oklch(42.1% 0.095 57.708);
  --zui-select-content-gradient-yellow-to: oklch(40.8% 0.123 38.172);
  --zui-select-content-gradient-purple-from: oklch(38.1% 0.176 304.987);
  --zui-select-content-gradient-purple-to: oklch(40.8% 0.153 2.432);
  --zui-select-content-gradient-teal-from: oklch(38.6% 0.063 188.416);
  --zui-select-content-gradient-teal-to: oklch(39.8% 0.07 227.392);
  --zui-select-content-gradient-indigo-from: oklch(35.9% 0.144 278.697);
  --zui-select-content-gradient-indigo-to: oklch(38.1% 0.176 304.987);
  --zui-select-content-gradient-pink-from: oklch(40.8% 0.153 2.432);
  --zui-select-content-gradient-pink-to: oklch(41% 0.159 10.272);
  --zui-select-content-gradient-orange-from: oklch(40.8% 0.123 38.172);
  --zui-select-content-gradient-orange-to: oklch(39.6% 0.141 25.723);
  --zui-select-content-blue-border: #2563eb;
  --zui-select-content-blue-bg: #2563eb14;
  --zui-select-content-blue-fg: #0f172a;
  --zui-select-content-cyan-border: #0891b2;
  --zui-select-content-cyan-bg: #0891b214;
  --zui-select-content-cyan-fg: #0f172a;
  --zui-select-content-green-border: #16a34a;
  --zui-select-content-green-bg: #16a34a14;
  --zui-select-content-green-fg: #0f172a;
  --zui-select-content-lime-border: #65a30d;
  --zui-select-content-lime-bg: #65a30d14;
  --zui-select-content-lime-fg: #0f172a;
  --zui-select-content-mint-border: #10b981;
  --zui-select-content-mint-bg: #10b98114;
  --zui-select-content-mint-fg: #0f172a;
  --zui-select-content-ocean-border: #0284c7;
  --zui-select-content-ocean-bg: #0284c714;
  --zui-select-content-ocean-fg: #0f172a;
  --zui-select-content-sapphire-border: #1d4ed8;
  --zui-select-content-sapphire-bg: #1d4ed814;
  --zui-select-content-sapphire-fg: #0f172a;
  --zui-select-content-lavender-border: #8b5cf6;
  --zui-select-content-lavender-bg: #8b5cf614;
  --zui-select-content-lavender-fg: #0f172a;
  --zui-select-content-ruby-border: #be123c;
  --zui-select-content-ruby-bg: #be123c14;
  --zui-select-content-ruby-fg: #0f172a;
  --zui-select-content-red-border: #dc2626;
  --zui-select-content-red-bg: #dc262614;
  --zui-select-content-red-fg: #0f172a;
  --zui-select-content-slate-border: #475569;
  --zui-select-content-slate-bg: #47556914;
  --zui-select-content-slate-fg: #0f172a;
  --zui-select-content-zinc-border: #52525b;
  --zui-select-content-zinc-bg: #52525b14;
  --zui-select-content-zinc-fg: #0f172a;
  --zui-select-content-stone-border: #57534e;
  --zui-select-content-stone-bg: #57534e14;
  --zui-select-content-stone-fg: #0f172a;
  --zui-select-content-royal-border: #4338ca;
  --zui-select-content-royal-bg: #4338ca14;
  --zui-select-content-royal-fg: #0f172a;
  --zui-select-content-electric-border: #0ea5e9;
  --zui-select-content-electric-bg: #0ea5e914;
  --zui-select-content-electric-fg: #0f172a;
  --zui-select-content-forest-border: #166534;
  --zui-select-content-forest-bg: #16653414;
  --zui-select-content-forest-fg: #0f172a;
  --zui-select-content-sunset-border: #ea580c;
  --zui-select-content-sunset-bg: #ea580c14;
  --zui-select-content-sunset-fg: #0f172a;
  --zui-select-content-magenta-border: #c026d3;
  --zui-select-content-magenta-bg: #c026d314;
  --zui-select-content-magenta-fg: #0f172a;
  --zui-select-content-crimson-border: #b91c1c;
  --zui-select-content-crimson-bg: #b91c1c14;
  --zui-select-content-crimson-fg: #0f172a;
  --zui-select-content-aqua-border: #0f766e;
  --zui-select-content-aqua-bg: #0f766e14;
  --zui-select-content-aqua-fg: #0f172a;
  --zui-select-content-plum-border: #7e22ce;
  --zui-select-content-plum-bg: #7e22ce14;
  --zui-select-content-plum-fg: #0f172a;
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-select-trigger-ring-focus-dark: oklch(70.7% 0.022 261.325);
  --zui-select-trigger-default-border-dark: oklch(87.2% 0.01 258.338);
}

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.