Select

A customizable select component with native and custom interfaces.

<.select
  field={f[:country]}
  options={[{"United States", "US"}, {"Canada", "CA"}]}
/>

Native Select

Use the browser's native select element with custom styling for better mobile compatibility and performance.

<.select
  native
  field={f[:country]}
  options={[{"United States", "US"}, {"Canada", "CA"}]}
/>

Basic Configuration

Configure the select with labels, sublabels, descriptions, and help text to provide context for the selection field.

<.select
  label="Country"
  field={f[:country]}
  options={[{"United States", "US"}, {"Canada", "CA"}]}
/>

Placeholder

Display placeholder text when no option is selected to guide users.

<.select
  label="Country"
  field={f[:country]}
  placeholder="Select a country"
  options={[{"United States", "US"}, {"Canada", "CA"}]}
/>

Multiple Selection

Enable selection of multiple options with checkbox indicators and array-based form submission.

<.select
  multiple
  field={f[:countries]}
  options={[{"United States", "US"}, {"Canada", "CA"}, {"Mexico", "MX"}]}
/>

Maximum Selection

Limit the number of selectable options in multiple selection mode using the max attribute.

<.select
  multiple
  max={2}
  field={f[:countries]}
  options={[{"United States", "US"}, {"Canada", "CA"}]}
/>

Searchable

Add client-side filtering with a search input for quick option discovery in large lists.

<.select
  searchable
  field={f[:country]}
  options={[{"United States", "US"}, {"Canada", "CA"}]}
/>

Clearable

Enable option deselection with a clear button and backspace key support.

<.select
  clearable
  placeholder="Select a country"
  field={f[:country]}
  options={[{"United States", "US"}, {"Canada", "CA"}, {"Mexico", "MX"}]}
/>

List Height

Control the maximum height of the options list with automatic scrolling.

<.select
  class="max-h-72"
  name="select"
  options={
    [
      {"Brazil", "BR"},
      {"Canada", "CA"},
      {"United States", "US"},
      {"Australia", "AU"}
      # more options...
    ]
  }
/>

States

Configure different select states for various interaction scenarios.

Disabled State

Render the select in a disabled state to prevent user interaction.

<.select
  name="country"
  value="US"
  options={[{"United States", "US"}, {"Canada", "CA"}]}
  disabled
/>

Error State

Display validation errors with appropriate visual feedback.

must be a South American country

<.select
  value="fr"
  name="language"
  options={[{"English", "en"}, {"Spanish", "es"}, {"French", "fr"}]}
  errors={["Language not supported"]}
/>

Customization

Customize the select's appearance and behavior with various options.

Custom Options

Render custom option content with support for rich HTML and state-based styling.

<.select
  field={f[:role]}
  placeholder="Role"
  options={Enum.map(@roles, fn role -> {role.value, role.name} end)}
>
  <:option :let={{value, label}}>
    <div class="cursor-default px-3 py-2 rounded-lg [[data-highlighted]_&]:bg-blue-500 [[data-highlighted]_&]:flx-focus:bg-blue-500">
      <div class="font-medium text-sm/6 [[data-highlighted]_&]:text-white"><%= label %></div>
      <div class="text-zinc-500 text-xs [[data-highlighted]_&]:text-zinc-100">
        <%= Enum.find(@roles, fn r -> r.value == value end).description %>
      </div>
    </div>
  </:option>
</.select>


<.select
  field={f[:country]}
  options={Enum.map(@countries, fn country -> {country.iso, country.name} end)}
>
  <:option :let={{value, label}}>
    <div class="cursor-default [[data-highlighted]_&]:bg-zinc-100 px-2 py-1 rounded flx-selected:bg-blue-500 [[data-highlighted]_&]:flx-selected:bg-blue-500">
      <.icon name={icon_name(value)} class="rounded-sm mr-1 shadow w-4" />
      <span class="flx-selected:text-white"><%= label %></span>
    </div>
  </:option>
</.select>

Grouped Options

Organize options into logical groups with optional group headers.

<.select
  field={f[:country]}
  options={[{"United States", "US"}, {"Canada", "CA"}]}
/>

Animation

Customize the opening and closing animations of the options list.

<.select
  field={f[:country]}
  options={[{"United States", "US"}, {"Canada", "CA"}]}
  animation_enter="scale-100 opacity-100"
  animation_leave="scale-90 opacity-0"
/>

Accessibility

The Select component follows the WAI-ARIA specs for the combobox pattern.

Keyboard support

Key Action
ArrowDown when the select is focused Navigates to the next option; Opens the select and highlights the first option if it is closed
ArrowUp when the select is focused Navigates to the previous option; Opens the select and highlights the last option if it is closed
EnterSpace when the select is focused Opens the select
Enter when an option is highlighted Selects the option
Escape when the select is open Closes the select
Tab when the select is open Closes the select and moves focus to the next focusable element
A-Za-z when the select is focused Navigates to the option starting with the typed character