Select

Style

Semantic colors, visual variants, density, corner radius, and max-width via modifier classes on the select root.

Preview

Subtle (default)

    <.select class="select" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Subtle (default)</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

Semantic

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

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

Default

Accent

Brand

Alert

Info

Success

    <.select class="select" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Default</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select ui-accent" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Accent</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select ui-brand" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Brand</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select ui-alert" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Alert</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select ui-info" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Info</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select ui-success" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Success</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

Variant

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

Subtle (default)

Solid

Ghost

    <.select class="select" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Subtle (default)</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select ui-solid" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Solid</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select ui-ghost" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Ghost</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

Semantic × variant

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

Base

Accent

Alert

Brand

Info

Success

    <.select class="select" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Base</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-solid" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Base</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-ghost" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Base</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-accent" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Accent</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-accent ui-solid" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Accent</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-accent ui-ghost" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Accent</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-alert" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Alert</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-alert ui-solid" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Alert</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-alert ui-ghost" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Alert</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-brand" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Brand</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-brand ui-solid" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Brand</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-brand ui-ghost" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Brand</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-info" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Info</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-info ui-solid" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Info</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-info ui-ghost" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Info</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-success" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Success</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-success ui-solid" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Success</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-success ui-ghost" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])} value={["fra"]}>
  <:label>Success</:label>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

Size

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

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

    <.select class="select ui-size-sm" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select ui-size-md" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select ui-size-lg" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select ui-size-xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

Rounded

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

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

    <.select class="select ui-rounded-none" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select ui-rounded-md" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select ui-rounded-lg" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select ui-rounded-xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>
<.select class="select ui-rounded-full" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

Max width

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

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

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

default (4xs)

none

full

9xs

8xs

7xs

6xs

5xs

4xs

3xs

2xs

2xl

3xl

4xl

5xl

6xl

7xl

8xl

9xl

    <.select class="select" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select max-w-none" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select max-w-full" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select max-w-9xs" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select max-w-8xs" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select max-w-7xs" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select max-w-6xs" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select max-w-5xs" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select max-w-4xs" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select max-w-3xs" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select max-w-2xs" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select max-w-xs" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select max-w-sm" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select max-w-md" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select max-w-lg" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select max-w-xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select max-w-2xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select max-w-3xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select max-w-4xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select max-w-5xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select max-w-6xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select max-w-7xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select max-w-8xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select max-w-9xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

Max height

Use class="max-h-{step}" to set the maximum height of a select 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 (select)

9xs

8xs

7xs

6xs

5xs

4xs

3xs

2xs

2xl

3xl

4xl

5xl

6xl

7xl

8xl

9xl

    <.select class="select" 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"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-max-height-9xs" 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"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-max-height-8xs" 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"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-max-height-7xs" 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"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-max-height-6xs" 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"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-max-height-5xs" 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"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-max-height-4xs" 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"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-max-height-3xs" 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"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-max-height-2xs" 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"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-max-height-xs" 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"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-max-height-sm" 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"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-max-height-md" 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"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-max-height-lg" 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"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-max-height-xl" 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"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-max-height-2xl" 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"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-max-height-3xl" 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"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-max-height-4xl" 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"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-max-height-5xl" 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"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-max-height-6xl" 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"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-max-height-7xl" 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"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-max-height-8xl" 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"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>

<.select class="select ui-max-height-9xl" 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"}])}>
  <:trigger><.heroicon name="hero-chevron-down" class="icon" /></:trigger>
</.select>