Select

A dropdown component for selecting items from a list. Supports searching, grouping, icons, and form integration.

Basic Select

Select with manually defined items and icons.

Select Food

<.select label="Select Food" id="select-basic" name="select-basic">
<.select_item value="makan-value">
<.icon name="hero-arrow-path" class="size-4" /> Makan
</.select_item>
<.select_item value="makan-value-2">
<.icon name="hero-check" class="size-4" /> Makan Dua
</.select_item>
</.select>

Searchable Select

Enable searching by setting searchable={true}. Users can type to filter options.

Searchable Select

<.select
label="Searchable Select"
id="select-searchable"
name="select-searchable"
placeholder="Search options..."
searchable={true}
options={["Apple", "Banana", "Cherry", "Date", "Elderberry"]}
/>

Select with Default Value

Pre-select an option using the value attribute.

Select with Default

<.select
label="Select with Default"
id="select-default"
name="select-default"
placeholder="Select an option"
searchable={true}
value="Option 3"
options={["Option 1", "Option 2", "Option 3"]}
/>

Select from Strings

Pass a list of strings to the options attribute for simple value/label pairs.

Select from Strings

<.select
label="Select from Strings"
id="select-strings"
name="select-strings"
placeholder="Select an option"
options={["Option A", "Option B", "Option C"]}
/>

Select from Tuples

Use tuples {value, label} to separate the form value from the displayed label.

Select from Tuples

<.select
label="Select from Tuples"
id="select-tuples"
name="select-tuples"
placeholder="Select an option"
options={[
{"val1", "Value One"},
{"val2", "Value Two"}
]}
/>

Grouped Select

Organize options into categories using nested tuples. Each group is a tuple {group_name, items}.

Select Grouped

<.select
id="select-grouped"
label="Select Grouped"
name="select-grouped"
placeholder="Select grouped"
value="carrot"
searchable={true}
options={[
{"Fruits", ["Apple", "Banana"]},
{"Vegetables", [
  {"carrot", "Carrot"},
  {"lettuce", "Lettuce"}
]}
]}
/>

Select with Footer

Add a footer slot for actions like adding new items.

Select with Footer

<.select
label="Select with Footer"
id="select-footer"
name="select-footer"
searchable={true}
>
<.select_item value="item-1">Item One</.select_item>
<.select_item value="item-2">Item Two</.select_item>
<.select_item value="item-3">Item Three</.select_item>
<:footer>
<div class="border-t border-border p-2">
  <button
    type="button"
    phx-click="add-new-item"
    class="flex items-center gap-2 text-sm text-primary"
  >
    <.icon name="hero-plus" class="size-4" /> Add New Item
  </button>
</div>
</:footer>
</.select>

Form Integration

Select works seamlessly with Phoenix forms and handles validation state.

<.form
:let={f}
for={@form}
phx-change="validate"
phx-submit="submit"
>
<.select
label="Select in Form"
id="select-form"
name="select-comp"
placeholder="Choose an option"
searchable={true}
options={["Event", "Meeting", "Reminder"]}
/>
<.input type="text" field={f[:select]} />
<.button type="submit">Submit</.button>
</.form>

Props

Name	Type	Default	Description
id	string	-	Unique identifier for the select
name	string	-	Form field name
label	string	nil	Label text displayed above the select
placeholder	string	"Select..."	Placeholder text when no option is selected
searchable	boolean	false	Enable search/filter functionality
options	list	[]	List of options (strings, tuples, or grouped)
value	string	nil	Currently selected value
class	string	nil	Additional CSS classes
disabled	boolean	false	Disable the select input
required	boolean	false	Mark the field as required
errors	list	[]	List of validation errors

Form Results


        %{"hello" => "world"}