Select

Select dropdown component with options and validation states.

Essentials


<.form for={@form}>
  <.select field={@form[:country]} label="Primary Market">
    <option value="">Select a country</option>
    <option value="us">United States</option>
  </.select>
  <.select field={@form[:timezone]} label="Operating Timezone">
    <optgroup :for={group <- @timezone_groups} label={group.label}>
      <option :for={option <- group.options} value={option.value}>
        {option.label}
      </option>
    </optgroup>
  </.select>
</.form>

Quick Filters

Active Pipeline

17 opportunities this quarter

Live Updated moments ago


<.form for={@filters_form}>
  <.select field={@filters_form[:status]} label="Status">
    <option value="">All statuses</option>
    <option :for={status <- @status_options} value={status.value}>
      {status.label}
    </option>
  </.select>
  <.select multiple name="filters[members][]" label="Team">
    <option value="ava-stone">Ava Stone</option>
    <option value="mateo-garcia">Mateo García</option>
  </.select>
</.form>

Design Details

Accessible defaults: Associate selects with labels, add helpers for context, and rely on the browser’s dropdown for consistent keyboard support.
Group related choices: Use optgroup for regions, teams, or contexts so long menus stay scannable.
Micro-interactions: Subtle focus rings and helper text guide quick decisions without overwhelming the UI.