Dropdown Select

Native <select> element. Semantic, accessible, keyboard-navigable with zero extra markup.

Default Select

<label for="plan">Choose a plan</label>
<select id="plan">
  <option value="">Select…</option>
  <option value="free">Free</option>
  <option value="pro">Pro</option>
  <option value="enterprise">Enterprise</option>
</select>

With Option Groups

<select id="category">
  <optgroup label="Frontend">
    <option>React</option>
    <option>Vue</option>
  </optgroup>
  <optgroup label="Backend">
    <option>Node.js</option>
  </optgroup>
</select>

Multiple Selection

<select multiple size="4">
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
</select>

Disabled

<select disabled>
  <option>Unavailable</option>
</select>

Accessibility

  • Always pair with a <label for="..."> — never use placeholder alone
  • Native <select> has full keyboard navigation built in
  • Use disabled attribute, not CSS-only
  • Include a blank or prompt <option> as default for required fields

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Dropdown component is designed for versatile implementation across modern web applications. Ideal scenarios include:

  • Dashboards & Admin Panels - Structured data presentation and interface control.
  • Content Management Systems - Organizing complex information hierarchies and media.
  • E-Commerce Platforms - Enhancing product discovery and user workflows.
  • Marketing Sites - Highlighting key product offerings cleanly and effectively.
  • SaaS Applications - Delivering native-feeling, responsive app experiences.