Select

A select is a dropdown that lets a user pick one option from a fixed list. Zazz styles the native <select> element so it matches the Input primitive's height, padding, radius, and theme.

Default

export default function SelectDefault() {  return (    <select className="select" defaultValue="">      <option value="" disabled>        Select one…      </option>      <option value="first">First choice</option>      <option value="second">Second choice</option>      <option value="third">Third choice</option>    </select>  );}

<select class="select">
  <option value="" disabled selected>Select one…</option>
  <option value="first">First choice</option>
  <option value="second">Second choice</option>
  <option value="third">Third choice</option>
</select>

The reset adds a custom chevron icon to the right side of the select. The native menu opens on click using the browser's built-in dropdown UI.

Form composition

<div class="form-group">
  <label class="form-label" for="plan">Plan</label>
  <select class="select" id="plan">
    <option value="" disabled selected>Choose a plan</option>
    <option value="starter">Starter</option>
    <option value="pro">Pro</option>
    <option value="team">Team</option>
  </select>
</div>

Tokens

States

• Default. Border --border, background --input, chevron visible.
• Hover. Border lifts to --primary.
• Focus. Border stays --primary; focus ring applies.
• Disabled. Set the disabled attribute on the select.
• Required. Use required on the select and a sentinel <option value="" disabled selected> to force a choice.

Native vs. custom

Zazz uses the native <select> rather than a custom dropdown component. The browser's open behavior is fast, accessible by default, and works correctly on mobile (where it triggers the platform's native picker).

For richer dropdowns (multi-select, search, async loading, custom item rendering), drop the select class and build a custom component. The native select is the right primitive for simple, single-value choices.

Accessibility

• Every select needs a label, visible or via sr-only.
• The placeholder option pattern (<option value="" disabled selected>Choose…</option>) provides a default prompt without making it a selectable value.
• Native <select> handles keyboard navigation, screen reader announcement, and option focus automatically.
• For grouped options, use <optgroup> with a label attribute.

Cross-platform

Where to next