Forms.select
Progressive
Renders a custom select with a button trigger and listbox content.
Use native_select/1 when you specifically want a plain HTML <select>.
With FormField
<.select field={@form[:role]}>
<:option value="admin" label="Admin" />
<:option value="member" label="Member" />
</.select>With label
<.select field={@form[:role]} label="Role">
<:option value="admin" label="Admin" />
<:option value="member" label="Member" />
</.select>With explicit errors
<.select field={@form[:role]} label="Role" errors={["is required"]}>
<:option value="admin" label="Admin" />
</.select>Inside field composition
<.field>
<:label><.label for={@form[:role].id}>Role</.label></:label>
<.select field={@form[:role]}>
<:option value="admin" label="Admin" />
</.select>
<:description>Choose your access level.</:description>
</.field>Custom select
<.select id="team-plan" name="plan" value="pro">
<:option value="free" label="Free" />
<:option value="pro" label="Pro" />
<:option value="enterprise" label="Enterprise" />
</.select>
Grouped labels
<.select id="assignee" name="assignee" placeholder="Assign a teammate">
<:option value="levi" label="Levi" description="Platform" group="Engineering" />
<:option value="mira" label="Mira" description="Product Design" group="Design" />
</.select>
Disabled option
<.select id="region" name="region">
<:option value="us" label="United States" />
<:option value="eu" label="Europe" />
<:option value="apac" label="APAC" disabled={true} />
</.select>
Clearable select
<.select id="support-tier" name="tier" value="pro" clearable={true}>
<:option value="free" label="Free" />
<:option value="pro" label="Pro" />
</.select>
Attributes
| Name | Type | Default | Values | Global Includes |
|---|---|---|---|---|
class
|
:string |
— | — | — |
clearable
|
:boolean |
false
|
— | — |
content_class
|
:string |
— | — | — |
disabled
|
:boolean |
false
|
— | — |
errors
|
:list |
— | — | — |
field
|
{:struct, Phoenix.HTML.FormField} |
— | — | — |
id
|
:string |
— | — | — |
label
|
:string |
— | — | — |
name
|
:string |
— | — | — |
placeholder
|
:string |
"Choose an option"
|
— | — |
rest
|
:global |
— | — |
required
,
aria-label
|
value
|
:string |
— | — | — |
Slots
| Slot | Slot Attributes |
|---|---|
empty
|
— |
option
Required
|
value
(:string)
Required
label
(:string)
Required
description
(:string)
disabled
(:boolean)
group
(:string)
|