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.

<.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