Docs

Select

Choose options from a predefined list.

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

Native

Use a browser-native select element with custom styling.

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

Label

Add clear labels to select components for improved usability.

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

Placeholder

Show placeholder text in selects to guide users on input.

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

Searchable

Enable option filtering with a search function in selects.

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

Multiple

Allow selection of multiple options within a single select.

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

Max selected

Set a limit on the number of selectable options in multiple selects.

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

Disabled

Display selects in a disabled state for unavailable functionality.

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

Errors

Show validation feedback with error states for select components.

must be a South American country



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

Animation

Apply custom animations to enhance select component interactions.

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

Customizing options

Tailor individual select options for specific use cases.

<.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-flx-focus]_&]:bg-blue-500 [[data-flx-focus]_&]:flx-focus:bg-blue-500">
      <div class="font-medium text-sm/6 [[data-flx-focus]_&]:text-white"><%= label %></div>
      <div class="text-zinc-500 text-xs [[data-flx-focus]_&]: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-flx-focus]_&]:bg-zinc-100 px-2 py-1 rounded flx-selected:bg-blue-500 [[data-flx-focus]_&]: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>

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