Select

Displays a list of options for the user to pick from — triggered by a button.

Default

Basic select with placeholder.

html
Select a fruit 
<div class="uc-select-wrapper uc-relative">
  <div class="uc-select-trigger">
    <span class="placeholder">Select a fruit</span>
    <svg class="uc-w-4 uc-h-4">...</svg>
  </div>
  <div class="uc-select-dropdown">
    <div class="uc-select-item">Apple</div>
    <!-- ...more items -->
  </div>
</div>

With Label

Select with form label.

html
Select a framework

Choose your preferred framework.

<label class="uc-label">Framework</label>
<div class="uc-select-wrapper uc-relative">
  <div class="uc-select-trigger">
    <span class="placeholder">Select a framework</span>
    <svg class="uc-w-4 uc-h-4">...</svg>
  </div>
  <div class="uc-select-dropdown">
    <div class="uc-select-item selected">Next.js</div>
    <div class="uc-select-item">SvelteKit</div>
    <div class="uc-select-item">Nuxt.js</div>
    <div class="uc-select-item">Remix</div>
    <div class="uc-select-item">Astro</div>
  </div>
</div>
<p class="uc-text-sm uc-text-fg-disabled">Choose your preferred framework.</p>

With Groups

Options organized into groups.

html
Select a timezone 
<div class="uc-select-wrapper uc-relative">
  <div class="uc-select-trigger">
    <span class="placeholder">Select a timezone</span>
    <svg class="uc-w-4 uc-h-4">...</svg>
  </div>
  <div class="uc-select-dropdown">
    <div class="uc-select-label">North America</div>
    <div class="uc-select-item">EST (UTC-5)</div>
    <div class="uc-select-item">CST (UTC-6)</div>
    <div class="uc-select-item">PST (UTC-8)</div>
    <div class="uc-select-separator"></div>
    <div class="uc-select-label">Europe</div>
    <div class="uc-select-item">GMT (UTC+0)</div>
    <div class="uc-select-item">CET (UTC+1)</div>
    <div class="uc-select-item">MSK (UTC+3)</div>
    <div class="uc-select-separator"></div>
    <div class="uc-select-label">Asia</div>
    <div class="uc-select-item">IST (UTC+5:30)</div>
    <div class="uc-select-item">JST (UTC+9)</div>
  </div>
</div>

Disabled

Select in disabled state.

html
Select option 
<div class="uc-select-trigger uc-opacity-50 uc-cursor-not-allowed">
  <span class="placeholder">Select option</span>
  <svg class="uc-w-4 uc-h-4">...</svg>
</div>

Form Example

Select in a settings form.

html
English
System 
<div class="uc-space-y-4">
  <div class="uc-space-y-2">
    <label class="uc-text-sm uc-font-medium">Language</label>
    <div class="uc-select-wrapper uc-relative">
      <div class="uc-select-trigger">
        <span>English</span>
        <svg class="uc-w-4 uc-h-4">...</svg>
      </div>
      <div class="uc-select-dropdown">
        <div class="uc-select-item selected">English</div>
        <div class="uc-select-item">Russian</div>
        <div class="uc-select-item">Spanish</div>
        <div class="uc-select-item">Japanese</div>
      </div>
    </div>
  </div>
  <div class="uc-space-y-2">
    <label class="uc-text-sm uc-font-medium">Theme</label>
    <div class="uc-select-wrapper uc-relative">
      <div class="uc-select-trigger">
        <span>System</span>
        <svg class="uc-w-4 uc-h-4">...</svg>
      </div>
      <div class="uc-select-dropdown">
        <div class="uc-select-item">Light</div>
        <div class="uc-select-item">Dark</div>
        <div class="uc-select-item selected">System</div>
      </div>
    </div>
  </div>
  <button class="uc-btn uc-w-full">Save Preferences</button>
</div>

API Reference

All CSS classes available for the Select component.

Class Type Description
uc-select-wrapper Base Container for the select component — relative positioning context
uc-select-trigger Base Clickable trigger button — displays selected value or placeholder
uc-select-dropdown Base Dropdown panel containing options — hidden by default
uc-select-item Base Individual option inside the dropdown
uc-select-label Modifier Non-selectable group label inside dropdown
uc-select-separator Modifier Visual divider between option groups
selected State Marks the currently selected item
placeholder State Styles the placeholder text in the trigger
open State Shows the dropdown when toggled on
uc-opacity-50 uc-cursor-not-allowed State Disabled appearance — reduced opacity, no pointer events

Accessibility

Keyboard and screen reader support.

Feature Details
Role Use native select element or role="listbox" for custom selects
Label Always provide a visible label linked via for/id
Keyboard Space/Enter opens, Arrow keys navigate options, Escape closes
Selected Selected option announced automatically by native select or aria-selected
Disabled Disabled options use disabled attribute or aria-disabled="true"