Listbox

    <.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>Choose a country</:label>
</.listbox>

  

    <.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>Choose a country</:label>
  <:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>

  

    <.listbox class="listbox" items={
  Corex.List.new([
    %{label: "France", value: "fra", group: "Europe"},
    %{label: "Belgium", value: "bel", group: "Europe"},
    %{label: "Germany", value: "deu", group: "Europe"},
    %{label: "Japan", value: "jpn", group: "Asia"},
    %{label: "China", value: "chn", group: "Asia"},
    %{label: "USA", value: "usa", group: "North America"}
  ])
}>
  <:label>Choose a country</:label>
  <:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>

  

    <.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>Country of residence</:label>
  <:item :let={%{item: entry}}>
    <% Code.ensure_loaded!(Flagpack) %>
    <Flagpack.flag name={String.to_existing_atom(to_string(entry.value))} />
    {entry.label}
  </:item>
  <:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>

  

    <.listbox
  class="listbox"
  aria_label="Extended grouped countries"
  items={
    Corex.List.new([
      %{label: "France", value: "fra", group: "Europe"},
      %{label: "Belgium", value: "bel", group: "Europe"},
      %{label: "Germany", value: "deu", group: "Europe"},
      %{label: "Japan", value: "jpn", group: "Asia"},
      %{label: "China", value: "chn", group: "Asia"},
      %{label: "South Korea", value: "kor", group: "Asia"}
    ])
  }
>
  <:item :let={%{item: entry}}>
    <Flagpack.flag name={flag_name(entry.value)} />
    {entry.label}
  </:item>
  <:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>