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 |