Combobox

Style

Semantic colors, visual variants, density, corner radius, and max-width on the combobox root.

Preview

    <.combobox class="combobox" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Subtle (default)", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

Semantic

Use class="ui-{role}" to set the semantic palette of a combobox.

Available options: accent, alert, brand, info, success

    <.combobox class="combobox" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Default", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>
<.combobox class="combobox ui-accent" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Accent", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>
<.combobox class="combobox ui-brand" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Brand", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>
<.combobox class="combobox ui-alert" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Alert", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>
<.combobox class="combobox ui-info" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Info", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>
<.combobox class="combobox ui-success" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Success", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

Variant

Variant modifiers control combobox surface treatment. Default is subtle (neutral fill and border; semantic roles tint text ink); add ui-solid for a filled surface.

    <.combobox class="combobox" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Subtle (default)", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>
<.combobox class="combobox ui-solid" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Solid", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>
<.combobox class="combobox ui-ghost" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Ghost", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

Semantic × variant

Combine semantic palette and variant treatment on the same host, for example combobox ui-accent ui-solid.

    <.combobox class="combobox" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Base", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-solid" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Base", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-ghost" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Base", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-accent" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Accent", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-accent ui-solid" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Accent", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-accent ui-ghost" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Accent", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-alert" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Alert", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-alert ui-solid" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Alert", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-alert ui-ghost" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Alert", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-brand" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Brand", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-brand ui-solid" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Brand", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-brand ui-ghost" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Brand", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-info" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Info", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-info ui-solid" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Info", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-info ui-ghost" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Info", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-success" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Success", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-success ui-solid" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Success", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-success ui-ghost" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Success", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

Size

Use class="ui-size-{size}" to set the size of a combobox.

Available options: xs, sm, md (default), lg, xl

    <.combobox class="combobox ui-size-sm" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "SM", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>
<.combobox class="combobox ui-size-md" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "MD", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>
<.combobox class="combobox ui-size-lg" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "LG", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>
<.combobox class="combobox ui-size-xl" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "XL", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

Rounded

Use class="ui-rounded-{step}" to set the corner radius of a combobox.

Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)

    <.combobox class="combobox ui-rounded-none" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "None", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>
<.combobox class="combobox ui-rounded-md" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "MD", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>
<.combobox class="combobox ui-rounded-lg" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "LG", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>
<.combobox class="combobox ui-rounded-xl" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "XL", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>
<.combobox class="combobox ui-rounded-full" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Full", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

Max width

Without max-w-*, width comes from component CSS. Default for combobox: 3xs (width: 100%).

Use class="max-w-{step}" to set the maximum width of a combobox root.

Available options: none, full, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs (default), 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl

default (3xs)

none

full

9xs

8xs

7xs

6xs

5xs

4xs

3xs

2xs

2xl

3xl

4xl

5xl

6xl

7xl

8xl

9xl

    <.combobox class="combobox" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox max-w-none" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox max-w-full" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox max-w-9xs" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox max-w-8xs" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox max-w-7xs" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox max-w-6xs" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox max-w-5xs" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox max-w-4xs" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox max-w-3xs" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox max-w-2xs" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox max-w-xs" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox max-w-sm" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox max-w-md" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox max-w-lg" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox max-w-xl" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox max-w-2xl" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox max-w-3xl" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox max-w-4xl" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox max-w-5xl" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox max-w-6xl" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox max-w-7xl" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox max-w-8xl" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox max-w-9xl" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", empty: "No results"}} 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>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

Max height

Use class="max-h-{step}" to set the maximum height of a combobox root.

Available options: none, full, screen, dvh, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl

default (combobox)

9xs

8xs

7xs

6xs

5xs

4xs

3xs

2xs

2xl

3xl

4xl

5xl

6xl

7xl

8xl

9xl

    <.combobox class="combobox" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", 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"}, %{label: "Italy", value: "ita"}, %{label: "Spain", value: "esp"}, %{label: "Portugal", value: "prt"}, %{label: "Poland", value: "pol"}, %{label: "Sweden", value: "swe"}, %{label: "Norway", value: "nor"}, %{label: "Denmark", value: "dnk"}, %{label: "Finland", value: "fin"}, %{label: "Ireland", value: "irl"}, %{label: "Greece", value: "grc"}])}>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-max-height-9xs" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", 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"}, %{label: "Italy", value: "ita"}, %{label: "Spain", value: "esp"}, %{label: "Portugal", value: "prt"}, %{label: "Poland", value: "pol"}, %{label: "Sweden", value: "swe"}, %{label: "Norway", value: "nor"}, %{label: "Denmark", value: "dnk"}, %{label: "Finland", value: "fin"}, %{label: "Ireland", value: "irl"}, %{label: "Greece", value: "grc"}])}>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-max-height-8xs" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", 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"}, %{label: "Italy", value: "ita"}, %{label: "Spain", value: "esp"}, %{label: "Portugal", value: "prt"}, %{label: "Poland", value: "pol"}, %{label: "Sweden", value: "swe"}, %{label: "Norway", value: "nor"}, %{label: "Denmark", value: "dnk"}, %{label: "Finland", value: "fin"}, %{label: "Ireland", value: "irl"}, %{label: "Greece", value: "grc"}])}>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-max-height-7xs" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", 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"}, %{label: "Italy", value: "ita"}, %{label: "Spain", value: "esp"}, %{label: "Portugal", value: "prt"}, %{label: "Poland", value: "pol"}, %{label: "Sweden", value: "swe"}, %{label: "Norway", value: "nor"}, %{label: "Denmark", value: "dnk"}, %{label: "Finland", value: "fin"}, %{label: "Ireland", value: "irl"}, %{label: "Greece", value: "grc"}])}>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-max-height-6xs" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", 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"}, %{label: "Italy", value: "ita"}, %{label: "Spain", value: "esp"}, %{label: "Portugal", value: "prt"}, %{label: "Poland", value: "pol"}, %{label: "Sweden", value: "swe"}, %{label: "Norway", value: "nor"}, %{label: "Denmark", value: "dnk"}, %{label: "Finland", value: "fin"}, %{label: "Ireland", value: "irl"}, %{label: "Greece", value: "grc"}])}>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-max-height-5xs" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", 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"}, %{label: "Italy", value: "ita"}, %{label: "Spain", value: "esp"}, %{label: "Portugal", value: "prt"}, %{label: "Poland", value: "pol"}, %{label: "Sweden", value: "swe"}, %{label: "Norway", value: "nor"}, %{label: "Denmark", value: "dnk"}, %{label: "Finland", value: "fin"}, %{label: "Ireland", value: "irl"}, %{label: "Greece", value: "grc"}])}>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-max-height-4xs" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", 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"}, %{label: "Italy", value: "ita"}, %{label: "Spain", value: "esp"}, %{label: "Portugal", value: "prt"}, %{label: "Poland", value: "pol"}, %{label: "Sweden", value: "swe"}, %{label: "Norway", value: "nor"}, %{label: "Denmark", value: "dnk"}, %{label: "Finland", value: "fin"}, %{label: "Ireland", value: "irl"}, %{label: "Greece", value: "grc"}])}>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-max-height-3xs" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", 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"}, %{label: "Italy", value: "ita"}, %{label: "Spain", value: "esp"}, %{label: "Portugal", value: "prt"}, %{label: "Poland", value: "pol"}, %{label: "Sweden", value: "swe"}, %{label: "Norway", value: "nor"}, %{label: "Denmark", value: "dnk"}, %{label: "Finland", value: "fin"}, %{label: "Ireland", value: "irl"}, %{label: "Greece", value: "grc"}])}>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-max-height-2xs" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", 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"}, %{label: "Italy", value: "ita"}, %{label: "Spain", value: "esp"}, %{label: "Portugal", value: "prt"}, %{label: "Poland", value: "pol"}, %{label: "Sweden", value: "swe"}, %{label: "Norway", value: "nor"}, %{label: "Denmark", value: "dnk"}, %{label: "Finland", value: "fin"}, %{label: "Ireland", value: "irl"}, %{label: "Greece", value: "grc"}])}>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-max-height-xs" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", 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"}, %{label: "Italy", value: "ita"}, %{label: "Spain", value: "esp"}, %{label: "Portugal", value: "prt"}, %{label: "Poland", value: "pol"}, %{label: "Sweden", value: "swe"}, %{label: "Norway", value: "nor"}, %{label: "Denmark", value: "dnk"}, %{label: "Finland", value: "fin"}, %{label: "Ireland", value: "irl"}, %{label: "Greece", value: "grc"}])}>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-max-height-sm" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", 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"}, %{label: "Italy", value: "ita"}, %{label: "Spain", value: "esp"}, %{label: "Portugal", value: "prt"}, %{label: "Poland", value: "pol"}, %{label: "Sweden", value: "swe"}, %{label: "Norway", value: "nor"}, %{label: "Denmark", value: "dnk"}, %{label: "Finland", value: "fin"}, %{label: "Ireland", value: "irl"}, %{label: "Greece", value: "grc"}])}>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-max-height-md" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", 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"}, %{label: "Italy", value: "ita"}, %{label: "Spain", value: "esp"}, %{label: "Portugal", value: "prt"}, %{label: "Poland", value: "pol"}, %{label: "Sweden", value: "swe"}, %{label: "Norway", value: "nor"}, %{label: "Denmark", value: "dnk"}, %{label: "Finland", value: "fin"}, %{label: "Ireland", value: "irl"}, %{label: "Greece", value: "grc"}])}>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-max-height-lg" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", 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"}, %{label: "Italy", value: "ita"}, %{label: "Spain", value: "esp"}, %{label: "Portugal", value: "prt"}, %{label: "Poland", value: "pol"}, %{label: "Sweden", value: "swe"}, %{label: "Norway", value: "nor"}, %{label: "Denmark", value: "dnk"}, %{label: "Finland", value: "fin"}, %{label: "Ireland", value: "irl"}, %{label: "Greece", value: "grc"}])}>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-max-height-xl" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", 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"}, %{label: "Italy", value: "ita"}, %{label: "Spain", value: "esp"}, %{label: "Portugal", value: "prt"}, %{label: "Poland", value: "pol"}, %{label: "Sweden", value: "swe"}, %{label: "Norway", value: "nor"}, %{label: "Denmark", value: "dnk"}, %{label: "Finland", value: "fin"}, %{label: "Ireland", value: "irl"}, %{label: "Greece", value: "grc"}])}>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-max-height-2xl" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", 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"}, %{label: "Italy", value: "ita"}, %{label: "Spain", value: "esp"}, %{label: "Portugal", value: "prt"}, %{label: "Poland", value: "pol"}, %{label: "Sweden", value: "swe"}, %{label: "Norway", value: "nor"}, %{label: "Denmark", value: "dnk"}, %{label: "Finland", value: "fin"}, %{label: "Ireland", value: "irl"}, %{label: "Greece", value: "grc"}])}>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-max-height-3xl" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", 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"}, %{label: "Italy", value: "ita"}, %{label: "Spain", value: "esp"}, %{label: "Portugal", value: "prt"}, %{label: "Poland", value: "pol"}, %{label: "Sweden", value: "swe"}, %{label: "Norway", value: "nor"}, %{label: "Denmark", value: "dnk"}, %{label: "Finland", value: "fin"}, %{label: "Ireland", value: "irl"}, %{label: "Greece", value: "grc"}])}>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-max-height-4xl" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", 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"}, %{label: "Italy", value: "ita"}, %{label: "Spain", value: "esp"}, %{label: "Portugal", value: "prt"}, %{label: "Poland", value: "pol"}, %{label: "Sweden", value: "swe"}, %{label: "Norway", value: "nor"}, %{label: "Denmark", value: "dnk"}, %{label: "Finland", value: "fin"}, %{label: "Ireland", value: "irl"}, %{label: "Greece", value: "grc"}])}>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-max-height-5xl" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", 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"}, %{label: "Italy", value: "ita"}, %{label: "Spain", value: "esp"}, %{label: "Portugal", value: "prt"}, %{label: "Poland", value: "pol"}, %{label: "Sweden", value: "swe"}, %{label: "Norway", value: "nor"}, %{label: "Denmark", value: "dnk"}, %{label: "Finland", value: "fin"}, %{label: "Ireland", value: "irl"}, %{label: "Greece", value: "grc"}])}>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-max-height-6xl" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", 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"}, %{label: "Italy", value: "ita"}, %{label: "Spain", value: "esp"}, %{label: "Portugal", value: "prt"}, %{label: "Poland", value: "pol"}, %{label: "Sweden", value: "swe"}, %{label: "Norway", value: "nor"}, %{label: "Denmark", value: "dnk"}, %{label: "Finland", value: "fin"}, %{label: "Ireland", value: "irl"}, %{label: "Greece", value: "grc"}])}>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-max-height-7xl" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", 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"}, %{label: "Italy", value: "ita"}, %{label: "Spain", value: "esp"}, %{label: "Portugal", value: "prt"}, %{label: "Poland", value: "pol"}, %{label: "Sweden", value: "swe"}, %{label: "Norway", value: "nor"}, %{label: "Denmark", value: "dnk"}, %{label: "Finland", value: "fin"}, %{label: "Ireland", value: "irl"}, %{label: "Greece", value: "grc"}])}>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-max-height-8xl" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", 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"}, %{label: "Italy", value: "ita"}, %{label: "Spain", value: "esp"}, %{label: "Portugal", value: "prt"}, %{label: "Poland", value: "pol"}, %{label: "Sweden", value: "swe"}, %{label: "Norway", value: "nor"}, %{label: "Denmark", value: "dnk"}, %{label: "Finland", value: "fin"}, %{label: "Ireland", value: "irl"}, %{label: "Greece", value: "grc"}])}>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>

<.combobox class="combobox ui-max-height-9xl" value={["fra"]} translation={%Corex.Combobox.Translation{placeholder: "Placeholder", 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"}, %{label: "Italy", value: "ita"}, %{label: "Spain", value: "esp"}, %{label: "Portugal", value: "prt"}, %{label: "Poland", value: "pol"}, %{label: "Sweden", value: "swe"}, %{label: "Norway", value: "nor"}, %{label: "Denmark", value: "dnk"}, %{label: "Finland", value: "fin"}, %{label: "Ireland", value: "irl"}, %{label: "Greece", value: "grc"}])}>
  <:empty>No results</:empty>
  <:trigger><.heroicon name="hero-chevron-down" /></:trigger>
  <:clear_trigger><.heroicon name="hero-backspace" class="icon" /></:clear_trigger>
</.combobox>