Combobox

A searchable select bound to a form field, with floating dropdown and keyboard navigation.

<.combobox></.combobox>

Examples

Framework picker

A searchable select with five options.

<.combobox id="demo-framework" field={%Phoenix.HTML.FormField{id: "demo_framework", name: "demo[framework]", value: nil, errors: [], field: :framework, form: %Phoenix.HTML.Form{}}} placeholder="Select framework…">
  <.combobox_item value="next">Next.js</.combobox_item>
  <.combobox_item value="sveltekit">SvelteKit</.combobox_item>
  <.combobox_item value="nuxt">Nuxt.js</.combobox_item>
  <.combobox_item value="remix">Remix</.combobox_item>
  <.combobox_item value="astro">Astro</.combobox_item>
</.combobox>

Show code

Props

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