Corex.Combobox (Corex v0.1.0-alpha.13)

View Source

Phoenix implementation of Zag.js Combobox.

Minimal

This example assumes the import of .icon from Core Components, you are free to replace it

<.combobox
      class="combobox"
      placeholder="Select a country"
      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"}
      ]}
    >
      <:trigger>
        <.icon name="hero-chevron-down" />
      </:trigger>
    </.combobox>

Grouped

<.combobox
      class="combobox"
      placeholder="Select a country"
      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"}
      ]}
    >
      <:trigger>
        <.icon name="hero-chevron-down" />
      </:trigger>
    </.combobox>

Extended

This example requires the installation of Flagpack to display the use of custom item rendering.

This example assumes the import of .icon from Core Components, you are free to replace it

  <.combobox
      class="combobox"
      placeholder="Select a country"
      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"}
      ]}
    >
      <:item :let={item}>
        <Flagpack.flag name={String.to_atom(item.id)} />
        {item.label}
      </:item>
      <:trigger>
        <.icon name="hero-chevron-down" />
      </:trigger>
      <:clear_trigger>
        <.icon name="hero-backspace" />
      </:clear_trigger>
      <:item_indicator>
        <.icon name="hero-check" />
      </:item_indicator>
    </.combobox>

Extended Grouped

This example requires the installation of Flagpack to display the use of custom item rendering.

This example assumes the import of .icon from Core Components, you are free to replace it

<.combobox
      class="combobox"
      placeholder="Select a country"
      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}>
        <Flagpack.flag name={String.to_atom(item.id)} />
        {item.label}
      </:item>
      <:trigger>
        <.icon name="hero-chevron-down" />
      </:trigger>
      <:clear_trigger>
        <.icon name="hero-backspace" />
      </:clear_trigger>
      <:item_indicator>
        <.icon name="hero-check" />
      </:item_indicator>
    </.combobox>

Styling

Use data attributes to target elements:

  • [data-scope="combobox"][data-part="root"] - Container
  • [data-scope="combobox"][data-part="control"] - Control wrapper
  • [data-scope="combobox"][data-part="input"] - Input field
  • [data-scope="combobox"][data-part="trigger"] - Trigger button
  • [data-scope="combobox"][data-part="clear-trigger"] - Clear button
  • [data-scope="combobox"][data-part="content"] - Dropdown content
  • [data-scope="combobox"][data-part="item-group"] - Group container
  • [data-scope="combobox"][data-part="item-group-label"] - Group label
  • [data-scope="combobox"][data-part="item"] - Item wrapper
  • [data-scope="combobox"][data-part="item-text"] - Item text
  • [data-scope="combobox"][data-part="item-indicator"] - Optional indicator

Summary

Components

combobox(assigns)

Renders a combobox component.

Components

combobox(assigns)

Renders a combobox component.

Attributes

  • id (:string) - The id of the combobox, useful for API to identify the combobox.
  • collection (:list) - The collection of items to display in the combobox. Defaults to [].
  • controlled (:boolean) - Whether the combobox is controlled. Defaults to false.
  • on_open_change (:string) - The server event name to trigger on open change. Defaults to nil.
  • on_open_change_client (:string) - The client event name to trigger on open change. Defaults to nil.
  • bubble (:boolean) - Whether the client events are bubbled. Defaults to false.
  • disabled (:boolean) - Whether the combobox is disabled. Defaults to false.
  • open (:boolean) - Whether the combobox is open. Defaults to false.
  • value (:list) - The value of the combobox. Defaults to [].
  • placeholder (:string) - The placeholder of the combobox. Defaults to nil.
  • always_submit_on_enter (:boolean) - Whether to always submit on enter. Defaults to false.
  • auto_focus (:boolean) - Whether to auto focus the combobox. Defaults to false.
  • close_on_select (:boolean) - Whether to close the combobox on select. Defaults to true.
  • dir (:string) - The direction of the combobox. Defaults to "ltr".
  • input_behavior (:string) - The input behavior of the combobox. Defaults to "autohighlight".
  • loop_focus (:boolean) - Whether to loop focus the combobox. Defaults to false.
  • multiple (:boolean) - Whether to allow multiple selection. Defaults to false.
  • invalid (:boolean) - Whether the combobox is invalid. Defaults to false.
  • name (:string) - The name of the combobox.
  • form (:string) - The id of the form of the combobox.
  • read_only (:boolean) - Whether the combobox is read only. Defaults to false.
  • required (:boolean) - Whether the combobox is required. Defaults to false.
  • on_input_value_change (:string) - The server event name to trigger on input value change. Defaults to nil.
  • on_value_change (:string) - The server event name to trigger on value change. Defaults to nil.
  • positioning (:map) - The positioning of the combobox. Defaults to %Corex.Positioning{hide_when_detached: true, strategy: "fixed", placement: "bottom", gutter: 0, shift: 0, overflow_padding: 0, arrow_padding: 4, flip: true, slide: true, overlap: false, same_width: true, fit_viewport: false}.
  • field (Phoenix.HTML.FormField) - A form field struct retrieved from the form, for example: @form[:country]. Automatically sets id, name, value, and errors from the form field.
  • errors (:list) - List of error messages to display. Defaults to [].
  • Global attributes are accepted.

Slots

  • label - The label content.
  • trigger (required) - The trigger button content.
  • clear_trigger - The clear button content.
  • item_indicator - Optional indicator for selected items.
  • error - Accepts attributes:
    • class (:string)
  • item - Custom content for each item. Receives the item as :let binding.