Combobox · Styling
Semantic colors, density, and width utilities on the combobox root.
Hex doc
Phoenix
Size
<.combobox class="combobox combobox--sm" placeholder="SM" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:empty>No results</:empty>
<:trigger><.heroicon name="hero-chevron-down" /></:trigger>
</.combobox>
<.combobox class="combobox combobox--md" placeholder="MD" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:empty>No results</:empty>
<:trigger><.heroicon name="hero-chevron-down" /></:trigger>
</.combobox>
<.combobox class="combobox combobox--lg" placeholder="LG" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:empty>No results</:empty>
<:trigger><.heroicon name="hero-chevron-down" /></:trigger>
</.combobox>
<.combobox class="combobox combobox--xl" placeholder="XL" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:empty>No results</:empty>
<:trigger><.heroicon name="hero-chevron-down" /></:trigger>
</.combobox>
Color
<.combobox class="combobox" placeholder="Default" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:empty>No results</:empty>
<:trigger><.heroicon name="hero-chevron-down" /></:trigger>
</.combobox>
<.combobox class="combobox combobox--accent" placeholder="Accent" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:empty>No results</:empty>
<:trigger><.heroicon name="hero-chevron-down" /></:trigger>
</.combobox>
<.combobox class="combobox combobox--brand" placeholder="Brand" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:empty>No results</:empty>
<:trigger><.heroicon name="hero-chevron-down" /></:trigger>
</.combobox>
<.combobox class="combobox combobox--alert" placeholder="Alert" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:empty>No results</:empty>
<:trigger><.heroicon name="hero-chevron-down" /></:trigger>
</.combobox>
<.combobox class="combobox combobox--info" placeholder="Info" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:empty>No results</:empty>
<:trigger><.heroicon name="hero-chevron-down" /></:trigger>
</.combobox>
<.combobox class="combobox combobox--success" placeholder="Success" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:empty>No results</:empty>
<:trigger><.heroicon name="hero-chevron-down" /></:trigger>
</.combobox>
Max width
<.combobox class="combobox max-w-2xs" placeholder="2xs" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:empty>No results</:empty>
<:trigger><.heroicon name="hero-chevron-down" /></:trigger>
</.combobox>
<.combobox class="combobox max-w-md" placeholder="MD" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:empty>No results</:empty>
<:trigger><.heroicon name="hero-chevron-down" /></:trigger>
</.combobox>
<.combobox class="combobox max-w-xl" placeholder="XL" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:empty>No results</:empty>
<:trigger><.heroicon name="hero-chevron-down" /></:trigger>
</.combobox>
<.combobox class="combobox max-w-2xl" placeholder="2XL" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
<:empty>No results</:empty>
<:trigger><.heroicon name="hero-chevron-down" /></:trigger>
</.combobox>