Maui.Select (maui v1.0.0-alpha.9)

A customizable select dropdown component with search and grouping support.

Basic Usage

<.select id="food" name="food">
  <.select_item value="apple">Apple</.select_item>
  <.select_item value="banana">Banana</.select_item>
  <.select_item value="orange">Orange</.select_item>
</.select>

With Options List

Pass options as a list for automatic rendering:

<.select id="food" name="food" options={["Apple", "Banana", "Orange"]} />

With Value/Label Pairs

<.select id="food" name="food" options={[
  {"apple", "Apple"},
  {"banana", "Banana"}
]} />

With Groups

<.select id="food" name="food" options={[
  {"Fruits", ["Apple", "Banana"]},
  {"Vegetables", [{"carrot", "Carrot"}]}
]} />

Searchable Select

<.select id="food" name="food" searchable={true} options={["Option 1", "Option 2"]} />

With Label

<.select id="food" name="food" label="Select Food">
  <:option value="apple">Apple</:option>
</.select>

With Phoenix Form

<.form for={@form}>
  <.select field={@form[:category]} options={@categories} />
</.form>

With Icons

<.select id="food" name="food">
  <.select_item value="apple">
    <.icon name="hero-apple" class="size-4" /> Apple
  </.select_item>
</.select>

With Footer

Add custom content at the bottom of the dropdown, such as action buttons:

<.select id="items" name="items" searchable={true}>
  <.select_item value="item-1">Item One</.select_item>
  <.select_item value="item-2">Item Two</.select_item>
  <:footer>
    <div class="border-t border-border p-2">
      <button type="button" phx-click="add-new" class="text-sm text-primary">
        + Add New Item
      </button>
    </div>
  </:footer>
</.select>

Attributes (select/1)

Attribute	Type	Default	Description
`id`	`string`	`nil`	Unique identifier
`name`	`string`	`nil`	Form field name
`value`	`string`	`nil`	Selected value
`placeholder`	`string`	`"Select an item"`	Placeholder text
`options`	`list`	`[]`	List of options (strings, tuples, or groups)
`searchable`	`boolean`	`false`	Enable search/filter functionality
`class`	`string`	`"w-fit"`	Additional CSS classes
`label`	`string`	`nil`	Label text
`field`	`FormField`	`nil`	Phoenix form field struct

Slots

Slot	Description
`inner_block`	Custom select items using `<.select_item>`
`header`	Content to display at the top of dropdown
`footer`	Content to display at the bottom of dropdown

Summary

Functions

map_field(assigns)

select(assigns)

select_icon(assigns)

select_item(assigns)

select_search(assigns)

Functions

map_field(assigns)

select(assigns)

Attributes

id (:string) - Defaults to nil.
name (:string) - Defaults to nil.
value (:string) - Defaults to nil.
placeholder (:string) - Defaults to "Select an item".
options (:list) - Defaults to [].
searchable (:boolean) - Defaults to false.
class (:string) - Defaults to "w-fit".
label (:string) - Defaults to nil.
field (Phoenix.HTML.FormField) - a form field struct retrieved from the form, for example: @form[:email]. Defaults to nil.