Corex.Listbox (Corex v0.1.0-alpha.29)

View Source

Phoenix implementation of Zag.js Listbox.

Examples

Minimal

<.listbox
  id="my-listbox"
  class="listbox"
  collection={[
    %{label: "France", id: "fra", disabled: true},
    %{label: "Belgium", id: "bel"},
    %{label: "Germany", id: "deu"},
    %{label: "Netherlands", id: "nld"},
    %{label: "Switzerland", id: "che"},
    %{label: "Austria", id: "aut"}
  ]}
>
  <:label>Choose a country</:label>
  <:item_indicator>
    <.icon name="hero-check" />
  </:item_indicator>
</.listbox>

Grouped

<.listbox
  class="listbox"
  collection={[
    %{label: "France", id: "fra", group: "Europe"},
    %{label: "Belgium", id: "bel", group: "Europe"},
    %{label: "Germany", id: "deu", group: "Europe"},
    %{label: "Netherlands", id: "nld", group: "Europe"},
    %{label: "Switzerland", id: "che", group: "Europe"},
    %{label: "Austria", id: "aut", group: "Europe"},
    %{label: "Japan", id: "jpn", group: "Asia"},
    %{label: "China", id: "chn", group: "Asia"},
    %{label: "South Korea", id: "kor", group: "Asia"},
    %{label: "Thailand", id: "tha", group: "Asia"},
    %{label: "USA", id: "usa", group: "North America"},
    %{label: "Canada", id: "can", group: "North America"},
    %{label: "Mexico", id: "mex", group: "North America"}
  ]}
>
  <:label>Choose a country</:label>
  <:item_indicator>
    <.icon name="hero-check" />
  </:item_indicator>
</.listbox>

Custom

This example requires the installation of Flagpack. Use the :item slot with :let={%{item: entry}} to access the entry map.

<.listbox
  class="listbox"
  collection={[
    %{label: "France", id: "fra"},
    %{label: "Belgium", id: "bel"},
    %{label: "Germany", id: "deu"},
    %{label: "Netherlands", id: "nld"},
    %{label: "Switzerland", id: "che"},
    %{label: "Austria", id: "aut"}
  ]}
>
  <:label>
    Country of residence
  </:label>
  <:item :let={%{item: entry}}>
    <Flagpack.flag name={String.to_atom(entry.id)} />
    {entry.label}
  </:item>
  <:item_indicator>
    <.icon name="hero-check" />
  </:item_indicator>
</.listbox>

Custom Grouped

<.listbox
  class="listbox"
  collection={[
    %{label: "France", id: "fra", group: "Europe"},
    %{label: "Belgium", id: "bel", group: "Europe"},
    %{label: "Germany", id: "deu", group: "Europe"},
    %{label: "Japan", id: "jpn", group: "Asia"},
    %{label: "China", id: "chn", group: "Asia"},
    %{label: "South Korea", id: "kor", group: "Asia"}
  ]}
>
  <:item :let={%{item: entry}}>
    <Flagpack.flag name={String.to_atom(entry.id)} />
    {entry.label}
  </:item>
  <:item_indicator>
    <.icon name="hero-check" />
  </:item_indicator>
</.listbox>

Styling

Use data attributes to target elements:

[data-scope="listbox"][data-part="root"] {}
[data-scope="listbox"][data-part="content"] {}
[data-scope="listbox"][data-part="item"] {}
[data-scope="listbox"][data-part="item-text"] {}
[data-scope="listbox"][data-part="item-indicator"] {}
[data-scope="listbox"][data-part="item-group"] {}
[data-scope="listbox"][data-part="item-group-label"] {}

If you wish to use the default Corex styling, you can use the class listbox on the component. This requires to install Mix.Tasks.Corex.Design first and import the component css file.

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/listbox.css";

You can then use modifiers

<.listbox class="listbox listbox--accent listbox--lg" collection={[]}>
</.listbox>

Learn more about modifiers and Corex Design

Summary

Components

listbox(assigns)

Components

listbox(assigns)

Attributes

  • id (:string)
  • collection (:list) (required) - List of Corex.List.Item or maps with id/value, label, disabled, group.
  • value (:list) - Selected value(s). Defaults to [].
  • controlled (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • dir (:string) - Defaults to nil.Must be one of nil, "ltr", or "rtl".
  • orientation (:string) - Defaults to "vertical". Must be one of "horizontal", or "vertical".
  • loop_focus (:boolean) - Defaults to false.
  • selection_mode (:string) - Defaults to "single". Must be one of "single", "multiple", or "extended".
  • select_on_highlight (:boolean) - Defaults to false.
  • deselectable (:boolean) - Defaults to false.
  • typeahead (:boolean) - Defaults to false.
  • on_value_change (:string) - Defaults to nil.
  • on_value_change_client (:string) - Defaults to nil.
  • aria_label (:string) - Accessible name when no label slot is provided. Defaults to nil.
  • Global attributes are accepted.

Slots

  • label
  • item
  • item_indicator