Select

A field-aware, accessible listbox powered by Floating UI and a hidden input for form submission.

<.select></.select>

Examples

Basic

A select with a list of options.

<.select id="basic-select" field={%Phoenix.HTML.FormField{id: "fruit", name: "fruit", value: nil, errors: [], field: :fruit, form: %Phoenix.HTML.Form{}}} placeholder="Select a fruit">
  <.select_item value="apple">Apple</.select_item>
  <.select_item value="banana">Banana</.select_item>
  <.select_item value="blueberry">Blueberry</.select_item>
  <.select_item value="grapes">Grapes</.select_item>
  <.select_item value="pineapple">Pineapple</.select_item>
</.select>

Show code

With pre-selected value

Pass a non-nil field value to pre-select an item.

<.select id="preselected-select" field={%Phoenix.HTML.FormField{id: "fruit2", name: "fruit2", value: "blueberry", errors: [], field: :fruit2, form: %Phoenix.HTML.Form{}}} placeholder="Select a fruit">
  <.select_item value="apple">Apple</.select_item>
  <.select_item value="banana">Banana</.select_item>
  <.select_item value="blueberry">Blueberry</.select_item>
  <.select_item value="grapes">Grapes</.select_item>
  <.select_item value="pineapple">Pineapple</.select_item>
</.select>

Show code

Props

Name	Type	Default
class	:string
field	{:struct, Phoenix.HTML.FormField}
id	:string
placeholder	:string	"Select…"
inner_block (slot)	:slot