Hex doc
Phoenix
Preview
France
Belgium
Germany
Netherlands
Switzerland
Austria
<.listbox class="listbox" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Subtle (default)</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
Semantic
Use class="ui-{role}" to set the semantic palette of a listbox.
Available options: accent, alert, brand, info, success
France
Belgium
Germany
Netherlands
Switzerland
Austria
France
Belgium
Germany
Netherlands
Switzerland
Austria
France
Belgium
Germany
Netherlands
Switzerland
Austria
France
Belgium
Germany
Netherlands
Switzerland
Austria
France
Belgium
Germany
Netherlands
Switzerland
Austria
France
Belgium
Germany
Netherlands
Switzerland
Austria
<.listbox class="listbox" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Default</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox ui-accent" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Accent</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox ui-brand" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Brand</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox ui-alert" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Alert</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox ui-info" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Info</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox ui-success" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Success</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
Size
Use class="ui-size-{size}" to set the size of a listbox.
Available options: xs, sm, md (default), lg, xl
France
Belgium
Germany
Netherlands
Switzerland
Austria
France
Belgium
Germany
Netherlands
Switzerland
Austria
France
Belgium
Germany
Netherlands
Switzerland
Austria
France
Belgium
Germany
Netherlands
Switzerland
Austria
<.listbox class="listbox ui-size-sm" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])}>
<:label>SM</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox ui-size-md" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])}>
<:label>MD</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox ui-size-lg" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])}>
<:label>LG</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox ui-size-xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])}>
<:label>XL</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
Rounded
Use class="ui-rounded-{step}" to set the corner radius of a listbox.
Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)
France
Belgium
Germany
Netherlands
Switzerland
Austria
France
Belgium
Germany
Netherlands
Switzerland
Austria
France
Belgium
Germany
Netherlands
Switzerland
Austria
France
Belgium
Germany
Netherlands
Switzerland
Austria
France
Belgium
Germany
Netherlands
Switzerland
Austria
<.listbox class="listbox ui-rounded-none" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])}>
<:label>None</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox ui-rounded-md" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])}>
<:label>MD</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox ui-rounded-lg" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])}>
<:label>LG</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox ui-rounded-xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])}>
<:label>XL</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox ui-rounded-full" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])}>
<:label>Full</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
Max width
Without max-w-*, width comes from component CSS. Default for listbox: 3xs (width: 100%).
Use class="max-w-{step}" to set the maximum width of a listbox 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)
France
Belgium
Germany
Netherlands
Switzerland
Austria
none
France
Belgium
Germany
Netherlands
Switzerland
Austria
full
France
Belgium
Germany
Netherlands
Switzerland
Austria
9xs
France
Belgium
Germany
Netherlands
Switzerland
Austria
8xs
France
Belgium
Germany
Netherlands
Switzerland
Austria
7xs
France
Belgium
Germany
Netherlands
Switzerland
Austria
6xs
France
Belgium
Germany
Netherlands
Switzerland
Austria
5xs
France
Belgium
Germany
Netherlands
Switzerland
Austria
4xs
France
Belgium
Germany
Netherlands
Switzerland
Austria
3xs
France
Belgium
Germany
Netherlands
Switzerland
Austria
2xs
France
Belgium
Germany
Netherlands
Switzerland
Austria
xs
France
Belgium
Germany
Netherlands
Switzerland
Austria
sm
France
Belgium
Germany
Netherlands
Switzerland
Austria
md
France
Belgium
Germany
Netherlands
Switzerland
Austria
lg
France
Belgium
Germany
Netherlands
Switzerland
Austria
xl
France
Belgium
Germany
Netherlands
Switzerland
Austria
2xl
France
Belgium
Germany
Netherlands
Switzerland
Austria
3xl
France
Belgium
Germany
Netherlands
Switzerland
Austria
4xl
France
Belgium
Germany
Netherlands
Switzerland
Austria
5xl
France
Belgium
Germany
Netherlands
Switzerland
Austria
6xl
France
Belgium
Germany
Netherlands
Switzerland
Austria
7xl
France
Belgium
Germany
Netherlands
Switzerland
Austria
8xl
France
Belgium
Germany
Netherlands
Switzerland
Austria
9xl
France
Belgium
Germany
Netherlands
Switzerland
Austria
<.listbox class="listbox" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-none" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-full" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-9xs" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-8xs" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-7xs" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-6xs" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-5xs" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-4xs" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-3xs" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-2xs" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-xs" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-sm" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-md" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-lg" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-2xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-3xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-4xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-5xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-6xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-7xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-8xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-9xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
Max height
Use class="max-h-{step}" to set the maximum height of a listbox 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 (listbox)
France
Belgium
Germany
Netherlands
Switzerland
Austria
Italy
Spain
Portugal
Poland
Sweden
Norway
Denmark
Finland
Ireland
Greece
9xs
France
Belgium
Germany
Netherlands
Switzerland
Austria
Italy
Spain
Portugal
Poland
Sweden
Norway
Denmark
Finland
Ireland
Greece
8xs
France
Belgium
Germany
Netherlands
Switzerland
Austria
Italy
Spain
Portugal
Poland
Sweden
Norway
Denmark
Finland
Ireland
Greece
7xs
France
Belgium
Germany
Netherlands
Switzerland
Austria
Italy
Spain
Portugal
Poland
Sweden
Norway
Denmark
Finland
Ireland
Greece
6xs
France
Belgium
Germany
Netherlands
Switzerland
Austria
Italy
Spain
Portugal
Poland
Sweden
Norway
Denmark
Finland
Ireland
Greece
5xs
France
Belgium
Germany
Netherlands
Switzerland
Austria
Italy
Spain
Portugal
Poland
Sweden
Norway
Denmark
Finland
Ireland
Greece
4xs
France
Belgium
Germany
Netherlands
Switzerland
Austria
Italy
Spain
Portugal
Poland
Sweden
Norway
Denmark
Finland
Ireland
Greece
3xs
France
Belgium
Germany
Netherlands
Switzerland
Austria
Italy
Spain
Portugal
Poland
Sweden
Norway
Denmark
Finland
Ireland
Greece
2xs
France
Belgium
Germany
Netherlands
Switzerland
Austria
Italy
Spain
Portugal
Poland
Sweden
Norway
Denmark
Finland
Ireland
Greece
xs
France
Belgium
Germany
Netherlands
Switzerland
Austria
Italy
Spain
Portugal
Poland
Sweden
Norway
Denmark
Finland
Ireland
Greece
sm
France
Belgium
Germany
Netherlands
Switzerland
Austria
Italy
Spain
Portugal
Poland
Sweden
Norway
Denmark
Finland
Ireland
Greece
md
France
Belgium
Germany
Netherlands
Switzerland
Austria
Italy
Spain
Portugal
Poland
Sweden
Norway
Denmark
Finland
Ireland
Greece
lg
France
Belgium
Germany
Netherlands
Switzerland
Austria
Italy
Spain
Portugal
Poland
Sweden
Norway
Denmark
Finland
Ireland
Greece
xl
France
Belgium
Germany
Netherlands
Switzerland
Austria
Italy
Spain
Portugal
Poland
Sweden
Norway
Denmark
Finland
Ireland
Greece
2xl
France
Belgium
Germany
Netherlands
Switzerland
Austria
Italy
Spain
Portugal
Poland
Sweden
Norway
Denmark
Finland
Ireland
Greece
3xl
France
Belgium
Germany
Netherlands
Switzerland
Austria
Italy
Spain
Portugal
Poland
Sweden
Norway
Denmark
Finland
Ireland
Greece
4xl
France
Belgium
Germany
Netherlands
Switzerland
Austria
Italy
Spain
Portugal
Poland
Sweden
Norway
Denmark
Finland
Ireland
Greece
5xl
France
Belgium
Germany
Netherlands
Switzerland
Austria
Italy
Spain
Portugal
Poland
Sweden
Norway
Denmark
Finland
Ireland
Greece
6xl
France
Belgium
Germany
Netherlands
Switzerland
Austria
Italy
Spain
Portugal
Poland
Sweden
Norway
Denmark
Finland
Ireland
Greece
7xl
France
Belgium
Germany
Netherlands
Switzerland
Austria
Italy
Spain
Portugal
Poland
Sweden
Norway
Denmark
Finland
Ireland
Greece
8xl
France
Belgium
Germany
Netherlands
Switzerland
Austria
Italy
Spain
Portugal
Poland
Sweden
Norway
Denmark
Finland
Ireland
Greece
9xl
France
Belgium
Germany
Netherlands
Switzerland
Austria
Italy
Spain
Portugal
Poland
Sweden
Norway
Denmark
Finland
Ireland
Greece
<.listbox class="listbox" 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"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox 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"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox 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"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox 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"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox 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"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox 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"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox 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"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox 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"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox 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"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox 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"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox 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"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox 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"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox 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"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox 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"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox 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"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox 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"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox 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"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox 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"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox 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"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox 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"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox 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"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox 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"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>