v1.1.1

Select

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

Interactive Requires: veritheme.js JS init: automatic

Default

Basic select with placeholder.

html
Select a fruit 
<div class="vt-select-wrapper vt-relative">
  <div id="trigger1" class="vt-select-trigger" onclick="toggleSelect('dropdown1')">
    <span class="placeholder">Select a fruit</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-down">
      <path d="m6 9 6 6 6-6"></path>
    </svg>
  </div>
  <div id="dropdown1" class="vt-select-dropdown">
    <div class="vt-select-item" onclick="selectItem('dropdown1','trigger1','Apple')">Apple</div>
    <div class="vt-select-item" onclick="selectItem('dropdown1','trigger1','Banana')">Banana</div>
    <div class="vt-select-item" onclick="selectItem('dropdown1','trigger1','Blueberry')">Blueberry</div>
    <div class="vt-select-item" onclick="selectItem('dropdown1','trigger1','Grapes')">Grapes</div>
    <div class="vt-select-item" onclick="selectItem('dropdown1','trigger1','Pineapple')">Pineapple</div>
  </div>
</div>

With Label

Select with form label.

html
Select a framework

Choose your preferred framework.

<label class="vt-label">
  Framework
</label>
<div class="vt-select-wrapper vt-relative">
  <div id="trigger2" class="vt-select-trigger" onclick="toggleSelect('dropdown2')">
    <span class="placeholder">Select a framework</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-down">
      <path d="m6 9 6 6 6-6"></path>
    </svg>
  </div>
  <div id="dropdown2" class="vt-select-dropdown">
    <div class="vt-select-item selected" onclick="selectItem('dropdown2','trigger2','Next.js')">Next.js</div>
    <div class="vt-select-item" onclick="selectItem('dropdown2','trigger2','SvelteKit')">SvelteKit</div>
    <div class="vt-select-item" onclick="selectItem('dropdown2','trigger2','Nuxt.js')">Nuxt.js</div>
    <div class="vt-select-item" onclick="selectItem('dropdown2','trigger2','Remix')">Remix</div>
    <div class="vt-select-item" onclick="selectItem('dropdown2','trigger2','Astro')">Astro</div>
  </div>
</div>
<p class="vt-text-sm vt-text-foreground-muted">Choose your preferred framework.</p>

With Groups

Options organized into groups.

html
Select a timezone 
<div class="vt-select-wrapper vt-relative">
  <div id="trigger3" class="vt-select-trigger" onclick="toggleSelect('dropdown3')">
    <span class="placeholder">Select a timezone</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-down">
      <path d="m6 9 6 6 6-6"></path>
    </svg>
  </div>
  <div id="dropdown3" class="vt-select-dropdown vt-inline-e706cba58e">
    <div class="vt-select-label">North America</div>
    <div class="vt-select-item" onclick="selectItem('dropdown3','trigger3','EST (UTC-5)')">EST (UTC-5)</div>
    <div class="vt-select-item" onclick="selectItem('dropdown3','trigger3','CST (UTC-6)')">CST (UTC-6)</div>
    <div class="vt-select-item" onclick="selectItem('dropdown3','trigger3','PST (UTC-8)')">PST (UTC-8)</div>
    <div class="vt-select-separator"></div>
    <div class="vt-select-label">Europe</div>
    <div class="vt-select-item" onclick="selectItem('dropdown3','trigger3','GMT (UTC+0)')">GMT (UTC+0)</div>
    <div class="vt-select-item" onclick="selectItem('dropdown3','trigger3','CET (UTC+1)')">CET (UTC+1)</div>
    <div class="vt-select-item" onclick="selectItem('dropdown3','trigger3','MSK (UTC+3)')">MSK (UTC+3)</div>
    <div class="vt-select-separator"></div>
    <div class="vt-select-label">Asia</div>
    <div class="vt-select-item" onclick="selectItem('dropdown3','trigger3','IST (UTC+5:30)')">IST (UTC+5:30)</div>
    <div class="vt-select-item" onclick="selectItem('dropdown3','trigger3','JST (UTC+9)')">JST (UTC+9)</div>
  </div>
</div>

Disabled

Select in disabled state.

html
Select option 
<div class="vt-select-trigger vt-opacity-50 vt-cursor-not-allowed">
  <span class="placeholder">Select option</span>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-down">
    <path d="m6 9 6 6 6-6"></path>
  </svg>
</div>

Form Example

Select in a settings form.

html
English
System 
<div class="vt-space-y-2">
  <label class="vt-text-sm vt-font-medium">Language</label>
  <div class="vt-select-wrapper vt-relative">
    <div id="trigger4" class="vt-select-trigger" onclick="toggleSelect('dropdown4')">
      <span>English</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-down">
        <path d="m6 9 6 6 6-6"></path>
      </svg>
    </div>
    <div id="dropdown4" class="vt-select-dropdown">
      <div class="vt-select-item selected" onclick="selectItem('dropdown4','trigger4','English')">English</div>
      <div class="vt-select-item" onclick="selectItem('dropdown4','trigger4','Russian')">Russian</div>
      <div class="vt-select-item" onclick="selectItem('dropdown4','trigger4','Spanish')">Spanish</div>
      <div class="vt-select-item" onclick="selectItem('dropdown4','trigger4','Japanese')">Japanese</div>
    </div>
  </div>
</div>
<div class="vt-space-y-2">
  <label class="vt-text-sm vt-font-medium">Theme</label>
  <div class="vt-select-wrapper vt-relative">
    <div id="trigger5" class="vt-select-trigger" onclick="toggleSelect('dropdown5')">
      <span>System</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-down">
        <path d="m6 9 6 6 6-6"></path>
      </svg>
    </div>
    <div id="dropdown5" class="vt-select-dropdown">
      <div class="vt-select-item" onclick="selectItem('dropdown5','trigger5','Light')">Light</div>
      <div class="vt-select-item" onclick="selectItem('dropdown5','trigger5','Dark')">Dark</div>
      <div class="vt-select-item selected" onclick="selectItem('dropdown5','trigger5','System')">System</div>
    </div>
  </div>
</div>
<button class="vt-btn vt-btn-primary vt-w-full">
  Save Preferences
</button>

Guidelines

Single choice among a known small set in a form. Large/searchable lists → combobox; menus of actions → dropdown-menu.

Astro
Do
Use a select for a single choice from a known, small set.
Actions
Don't
Don't use a select for action menus — use a dropdown menu.

API Reference

All CSS classes available for the Select component.

Class Type Description
vt-select-wrapper Base Container for the select component — relative positioning context
vt-select-trigger Base Clickable trigger button — displays selected value or placeholder
vt-select-dropdown Base Dropdown panel containing options — hidden by default
vt-select-item Base Individual option inside the dropdown
vt-select-label Modifier Non-selectable group label inside dropdown
vt-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
vt-opacity-50 vt-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"
Built with:
Input MenuItem Icons Separator