CSS-Only

Select

Native select dropdown component with multiple sizes and width variants. Pure CSS-only, works without JavaScript.

Example

<label for="country">Country</label>
<select id="country" class="omni-select" data-size="md" data-width="md">
  <option value="">Choose a country...</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <option value="uk">United Kingdom</option>
</select>

Sizes

Use data-size to adjust select dimensions:

<select class="omni-select" data-size="sm" data-width="md">...</select>
<select class="omni-select" data-size="md" data-width="md">...</select>
<select class="omni-select" data-size="lg" data-width="md">...</select>

Widths

Use data-width to control select width:

<select class="omni-select" data-size="md" data-width="sm">...</select>
<select class="omni-select" data-size="md" data-width="md">...</select>
<select class="omni-select" data-size="md" data-width="lg">...</select>
<select class="omni-select" data-size="md" data-width="full">...</select>

States

Disabled

Use the disabled attribute to prevent interaction:

<select class="omni-select" data-size="md" disabled>
  <option value="">Cannot select...</option>
  <option value="1">Option 1</option>
</select>

Required

Use the required attribute with aria-required="true":

<label for="role">
  Role <span aria-hidden="true">*</span>
</label>
<select id="role" class="omni-select" required aria-required="true">
  <option value="">Choose a role...</option>
  <option value="admin">Administrator</option>
</select>

Error State

Use aria-invalid="true" and aria-describedby for error handling:

Please select a country 
<label for="country">Country</label>
<select id="country" class="omni-select"
        aria-invalid="true" aria-describedby="country-error">
  <option value="">Choose a country...</option>
</select>
<span id="country-error" role="alert">Please select a country</span>

Multiple Selection

Use the multiple attribute for multi-select. The dropdown arrow is automatically removed:

<label for="fruits">Select multiple items</label>
<select id="fruits" class="omni-select" data-size="md" data-width="md" multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

Option Groups

Organize options into groups using <optgroup>:

<select class="omni-select" data-size="md" data-width="md">
  <option value="">Choose a location...</option>
  <optgroup label="North America">
    <option value="us">United States</option>
    <option value="ca">Canada</option>
  </optgroup>
  <optgroup label="Europe">
    <option value="uk">United Kingdom</option>
    <option value="de">Germany</option>
  </optgroup>
</select>

API Reference

Attribute Values Default Description
data-size sm, md, lg md Select height and padding
data-width sm (150px), md (250px), lg (350px), full (100%) 200px Select width
disabled — — Disables interaction
required — — Makes selection required
multiple — — Allows multiple selections
aria-invalid true, false false Indicates validation error
aria-required true, false false Indicates required field for AT
aria-describedby ID reference — Associates error/help text

Accessibility

  • Always associate selects with labels using for and id attributes
  • Use aria-required="true" in addition to required for screen readers
  • Use aria-invalid="true" and aria-describedby for error states
  • Error messages should have role="alert" for immediate feedback
  • Full keyboard navigation support (Tab, Arrow keys, Enter, Escape)
  • Focus visible indicators with semantic color-matched rings
  • Visual required indicators (asterisks) should have aria-hidden="true"
  • Native browser select provides built-in keyboard and screen reader support
  • Optgroups provide semantic grouping for assistive technologies

Best Practices

  • Always provide a default/placeholder option (e.g., "Choose...")
  • Use data-width="full" in forms for consistent alignment
  • Keep option text concise for better mobile experience
  • Use optgroups for more than 10-15 options to improve scanability
  • Consider using a searchable dropdown for 20+ options
  • Don't rely solely on placeholder text to convey important information
  • Match select size with surrounding form elements for visual consistency