Combobox Anatomy
Structure, slots, grouped data, and custom item rendering.
Hex doc
Phoenix
Minimal
<.combobox
class="combobox"
translation={%Corex.Combobox.Translation{placeholder: "Select a country", empty: "No results"}}
items={Corex.List.new([
%{label: "France", value: "fra"},
%{label: "Belgium", value: "bel"},
%{label: "Germany", value: "deu"},
%{label: "Netherlands", value: "nld"},
%{label: "Switzerland", value: "che"},
%{label: "Austria", value: "aut"}
])}
>
<:trigger>
<.heroicon name="hero-chevron-down" />
</:trigger>
</.combobox>
Slots (indicator, clear, trigger)
<.combobox
class="combobox"
placeholder="Select a country"
items={Corex.List.new([
%{label: "France", value: "fra"},
%{label: "Belgium", value: "bel"},
%{label: "Germany", value: "deu"},
%{label: "Netherlands", value: "nld"},
%{label: "Switzerland", value: "che"},
%{label: "Austria", value: "aut"}
])}
>
<:empty>No results</:empty>
<:trigger><.heroicon name="hero-chevron-down" /></:trigger>
<:clear_trigger><.heroicon name="hero-backspace" /></:clear_trigger>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.combobox>
With label
Country
<.combobox
class="combobox"
placeholder="Select a country"
items={Corex.List.new(items_minimal())}
>
<:empty>No results</:empty>
<:label>Country</:label>
<:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
<:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
<:item_indicator><.heroicon name="hero-check" class="icon" /></:item_indicator>
</.combobox>
Grouped
<.combobox
class="combobox"
translation={%Corex.Combobox.Translation{placeholder: "Select a country", empty: "No results"}}
items={Corex.List.new([
%{label: "France", value: "fra", group: "Europe"},
%{label: "Belgium", value: "bel", group: "Europe"},
%{label: "Germany", value: "deu", group: "Europe"},
%{label: "Netherlands", value: "nld", group: "Europe"},
%{label: "Switzerland", value: "che", group: "Europe"},
%{label: "Austria", value: "aut", group: "Europe"},
%{label: "Japan", value: "jpn", group: "Asia"},
%{label: "China", value: "chn", group: "Asia"},
%{label: "South Korea", value: "kor", group: "Asia"},
%{label: "Thailand", value: "tha", group: "Asia"},
%{label: "USA", value: "usa", group: "North America"},
%{label: "Canada", value: "can", group: "North America"},
%{label: "Mexico", value: "mex", group: "North America"}
])}
>
<:trigger>
<.heroicon name="hero-chevron-down" />
</:trigger>
</.combobox>
Extended
<.combobox
class="combobox"
translation={%Corex.Combobox.Translation{placeholder: "Select a country", empty: "No results"}}
items={Corex.List.new([
%{label: "France", value: "fra"},
%{label: "Belgium", value: "bel"},
%{label: "Germany", value: "deu"},
%{label: "Netherlands", value: "nld"},
%{label: "Switzerland", value: "che"},
%{label: "Austria", value: "aut"}
])}
>
<:item :let={item}>
<Flagpack.flag name={String.to_atom(to_string(item.value))} />
{item.label}
</:item>
<:trigger>
<.heroicon name="hero-chevron-down" />
</:trigger>
<:clear_trigger>
<.heroicon name="hero-backspace" />
</:clear_trigger>
<:item_indicator>
<.heroicon name="hero-check" />
</:item_indicator>
</.combobox>
Extended grouped
<.combobox
class="combobox"
translation={%Corex.Combobox.Translation{placeholder: "Select a country", empty: "No results"}}
items={Corex.List.new([
%{label: "France", value: "fra", group: "Europe"},
%{label: "Belgium", value: "bel", group: "Europe"},
%{label: "Germany", value: "deu", group: "Europe"},
%{label: "Japan", value: "jpn", group: "Asia"},
%{label: "China", value: "chn", group: "Asia"},
%{label: "South Korea", value: "kor", group: "Asia"}
])}
>
<:item :let={item}>
<Flagpack.flag name={String.to_atom(to_string(item.value))} />
{item.label}
</:item>
<:trigger>
<.heroicon name="hero-chevron-down" />
</:trigger>
<:clear_trigger>
<.heroicon name="hero-backspace" />
</:clear_trigger>
<:item_indicator>
<.heroicon name="hero-check" />
</:item_indicator>
</.combobox>