Erabi.Components (Erabi v0.1.0)

Copy Markdown View Source

The pickers: select/1, multi_select/1, combobox/1, tags/1, person_picker/1, color_picker/1, emoji_picker/1 and icon_picker/1.

import Erabi.Components

<.select field={@form[:status]} options={@statuses} />
<.multi_select field={@form[:labels]} options={@labels} max={3} />
<.combobox field={@form[:city_id]} search={&Places.cities/1} selected={@city} />
<.tags field={@form[:tags]} options={@tags} create />
<.person_picker field={@form[:owner_id]} people={@members} me={@current_user} />
<.color_picker field={@form[:color]} custom />
<.emoji_picker field={@form[:icon]} />

Each picker is a field of a form: it posts what the browser's own <select> would (name, or name[] for several values), works with phx-change and changesets, and is that <select> until its hook mounts (and with JavaScript off).

A picker needs the Erabi hook in the LiveSocket and the Erabi CSS (see the README). A picker with search needs on_mount Erabi.Live in its LiveView.

Summary

Functions

color_picker(assigns)

A picker of a color: swatches of a palette, and, with custom, any color, in an area of lightness and chroma for a hue and a hue slider (OKLCH, which follows how people see colors, with the edge of what a screen shows), a hex box, the browser's eyedropper where it has one, and the person's recent colors.

combobox(assigns)

A box to type in that suggests options as people type, and takes one. With create, a typed value that is not an option is kept as it is.

emoji_picker(assigns)

A picker of an emoji, as Notion's page icons and Slack's reactions: every emoji by category, a search in the page's language (names, tags and :shortcodes:), skin tones, the person's recent emoji, and a preview. It posts the emoji itself ("🎉", in the chosen skin tone).

icon_picker(assigns)

A picker of one of the app's icons: a grid of the options that have an :icon, drawn by the :icon slot, with a search by their labels and keywords. It posts the option's value.

multi_select(assigns)

A picker of several values, shown as chips: the list stays open as people check and uncheck. min and max count the values.

person_picker(assigns)

A picker of people and agents: avatars (an image, or initials on the person's color), agents marked as such, and me first. The people are maps or structs with :id and :name (and :avatar, :color, :kind), as users and Issho.Actors are; give them as people (or options), or find them with search.

select(assigns)

A picker of one value from a list, as a <select>: a box that opens the list, with typeahead, and a box to filter a long list.

tags(assigns)

Chips that people type: suggestions as they type, Enter or a comma to add one, Backspace to take the last one back. With create, a new tag is "Create “…”" at the end of the list, under the rules' pattern and lengths.

Functions

color_picker(assigns)

A picker of a color: swatches of a palette, and, with custom, any color, in an area of lightness and chroma for a hue and a hue slider (OKLCH, which follows how people see colors, with the edge of what a screen shows), a hex box, the browser's eyedropper where it has one, and the person's recent colors.

The palette is Erabi's nine option colors by default (Erabi.Option.colors/0), posted by name ("blue") and drawn as the chips they make, so a label's color reads the same in its picker and in its chips; or the app's colors, as options ([{"Ocean", "#3f6f8f"}]). A custom color posts as #rrggbb: custom is the rules' create, with a pattern of six hex digits. Give the changeset the same rules (Erabi.Changeset.validate_choice/4 with create: true, pattern: "#[0-9a-fA-F]{6}").

With contrast (a background, #rrggbb), the custom colors show their contrast ratio with it, and its WCAG grade.

Attributes

  • field (Phoenix.HTML.FormField) - the form field, for example @form[:status]. Defaults to nil.
  • id (:string) - the id of the picker element; the default is the field's id with _picker. Defaults to nil.
  • name (:string) - the input name, without a field. Defaults to nil.
  • value (:any) - the value, without a field. Defaults to nil.
  • options (:list) - the options: anything a <select> takes, or maps with colors, hints and icons (see Erabi.Option). Defaults to [].
  • selected (:list) - options of the chosen values that are not in options, for their labels (the options of a search). Defaults to [].
  • search (:any) - a function that finds options for a query, run in the LiveView by Erabi.Live (see the Search guide). Defaults to nil.
  • async (:boolean) - when true, the search runs in a task (start_async). Defaults to false.
  • filter (:boolean) - whether the list has a box to filter it; the default is true from 10 options. Defaults to nil.
  • label_id (:string) - the id of the element that labels the picker (aria-labelledby); a <label for> of the field works too. Defaults to nil.
  • label (:string) - the accessible name when there is no label; the default is the field name in words. Defaults to nil.
  • placeholder (:string) - the words of an empty picker. Defaults to nil.
  • rules (:any) - the rules, an Erabi.Rules or its options; give the same to Erabi.Changeset. Defaults to nil.
  • min (:integer) - a shortcut for the :min rule. Defaults to nil.
  • max (:integer) - a shortcut for the :max rule. Defaults to nil.
  • create (:boolean) - a shortcut for the :create rule. Defaults to nil.
  • required (:boolean) - Defaults to false.
  • clearable (:boolean) - whether a picker of one value has a clear button; the default is true unless required. Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • readonly (:boolean) - Defaults to false.
  • locale (:string) - a BCP 47 locale for the words and numbers; the default is config :erabi, locale:, else "en". Defaults to nil.
  • messages (:map) - words that replace the built-in ones, see Erabi.Messages. Defaults to nil.
  • on_change (:string) - an event that the picker pushes with %{"id", "value"} on each change, for a picker outside a form. Defaults to nil.
  • issho (:any) - with Issho, the picker's document in a room, to show who is choosing in it: [instance: MyApp.Issho, document: "page:42/status"] (see Erabi.Issho). Defaults to nil.
  • user (:any) - the person choosing, with issho, as Issho.Actor says them. Defaults to nil.
  • sheet (:atom) - where the popup is a sheet from the bottom of the screen: on phones (:auto), :always or :never; the default is config :erabi, sheet:, else :auto. Defaults to nil. Must be one of nil, :auto, :always, or :never.
  • class (:any) - classes for the picker element. Defaults to nil.
  • palette (:list) - the colors to choose from, as options; the default is Erabi's nine (or options). Defaults to nil.
  • custom (:boolean) - whether any color may be chosen, as #rrggbb. Defaults to false.
  • contrast (:string) - a background, #rrggbb: custom colors show their contrast ratio with it. Defaults to nil.
  • Global attributes are accepted. attributes for the picker element, such as phx-target; aria-describedby goes to the field. Supports all globals plus: ["form"].

Slots

  • icon - draws an option's :icon, given its name (:let={name}).

combobox(assigns)

A box to type in that suggests options as people type, and takes one. With create, a typed value that is not an option is kept as it is.

Attributes

  • field (Phoenix.HTML.FormField) - the form field, for example @form[:status]. Defaults to nil.
  • id (:string) - the id of the picker element; the default is the field's id with _picker. Defaults to nil.
  • name (:string) - the input name, without a field. Defaults to nil.
  • value (:any) - the value, without a field. Defaults to nil.
  • options (:list) - the options: anything a <select> takes, or maps with colors, hints and icons (see Erabi.Option). Defaults to [].
  • selected (:list) - options of the chosen values that are not in options, for their labels (the options of a search). Defaults to [].
  • search (:any) - a function that finds options for a query, run in the LiveView by Erabi.Live (see the Search guide). Defaults to nil.
  • async (:boolean) - when true, the search runs in a task (start_async). Defaults to false.
  • filter (:boolean) - whether the list has a box to filter it; the default is true from 10 options. Defaults to nil.
  • label_id (:string) - the id of the element that labels the picker (aria-labelledby); a <label for> of the field works too. Defaults to nil.
  • label (:string) - the accessible name when there is no label; the default is the field name in words. Defaults to nil.
  • placeholder (:string) - the words of an empty picker. Defaults to nil.
  • rules (:any) - the rules, an Erabi.Rules or its options; give the same to Erabi.Changeset. Defaults to nil.
  • min (:integer) - a shortcut for the :min rule. Defaults to nil.
  • max (:integer) - a shortcut for the :max rule. Defaults to nil.
  • create (:boolean) - a shortcut for the :create rule. Defaults to nil.
  • required (:boolean) - Defaults to false.
  • clearable (:boolean) - whether a picker of one value has a clear button; the default is true unless required. Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • readonly (:boolean) - Defaults to false.
  • locale (:string) - a BCP 47 locale for the words and numbers; the default is config :erabi, locale:, else "en". Defaults to nil.
  • messages (:map) - words that replace the built-in ones, see Erabi.Messages. Defaults to nil.
  • on_change (:string) - an event that the picker pushes with %{"id", "value"} on each change, for a picker outside a form. Defaults to nil.
  • issho (:any) - with Issho, the picker's document in a room, to show who is choosing in it: [instance: MyApp.Issho, document: "page:42/status"] (see Erabi.Issho). Defaults to nil.
  • user (:any) - the person choosing, with issho, as Issho.Actor says them. Defaults to nil.
  • sheet (:atom) - where the popup is a sheet from the bottom of the screen: on phones (:auto), :always or :never; the default is config :erabi, sheet:, else :auto. Defaults to nil. Must be one of nil, :auto, :always, or :never.
  • class (:any) - classes for the picker element. Defaults to nil.
  • Global attributes are accepted. attributes for the picker element, such as phx-target; aria-describedby goes to the field. Supports all globals plus: ["form"].

Slots

  • icon - draws an option's :icon, given its name (:let={name}).

emoji_picker(assigns)

A picker of an emoji, as Notion's page icons and Slack's reactions: every emoji by category, a search in the page's language (names, tags and :shortcodes:), skin tones, the person's recent emoji, and a preview. It posts the emoji itself ("🎉", in the chosen skin tone).

With options that have an :icon (drawn by the :icon slot), it has a second tab of the app's icons, which post their values.

<.emoji_picker field={@form[:icon]} />
<.emoji_picker field={@form[:icon]} options={@icons}>
  <:icon :let={name}><.lucide name={name} /></:icon>
</.emoji_picker>

The emoji are a file of the page's language, which the picker fetches as it first opens: serve them as Erabi.Emoji says. Check the value with Erabi.Emoji.options/1. The picker is in its own entry: import "erabi/emoji".

Attributes

  • field (Phoenix.HTML.FormField) - the form field, for example @form[:status]. Defaults to nil.
  • id (:string) - the id of the picker element; the default is the field's id with _picker. Defaults to nil.
  • name (:string) - the input name, without a field. Defaults to nil.
  • value (:any) - the value, without a field. Defaults to nil.
  • options (:list) - the options: anything a <select> takes, or maps with colors, hints and icons (see Erabi.Option). Defaults to [].
  • selected (:list) - options of the chosen values that are not in options, for their labels (the options of a search). Defaults to [].
  • search (:any) - a function that finds options for a query, run in the LiveView by Erabi.Live (see the Search guide). Defaults to nil.
  • async (:boolean) - when true, the search runs in a task (start_async). Defaults to false.
  • filter (:boolean) - whether the list has a box to filter it; the default is true from 10 options. Defaults to nil.
  • label_id (:string) - the id of the element that labels the picker (aria-labelledby); a <label for> of the field works too. Defaults to nil.
  • label (:string) - the accessible name when there is no label; the default is the field name in words. Defaults to nil.
  • placeholder (:string) - the words of an empty picker. Defaults to nil.
  • rules (:any) - the rules, an Erabi.Rules or its options; give the same to Erabi.Changeset. Defaults to nil.
  • min (:integer) - a shortcut for the :min rule. Defaults to nil.
  • max (:integer) - a shortcut for the :max rule. Defaults to nil.
  • create (:boolean) - a shortcut for the :create rule. Defaults to nil.
  • required (:boolean) - Defaults to false.
  • clearable (:boolean) - whether a picker of one value has a clear button; the default is true unless required. Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • readonly (:boolean) - Defaults to false.
  • locale (:string) - a BCP 47 locale for the words and numbers; the default is config :erabi, locale:, else "en". Defaults to nil.
  • messages (:map) - words that replace the built-in ones, see Erabi.Messages. Defaults to nil.
  • on_change (:string) - an event that the picker pushes with %{"id", "value"} on each change, for a picker outside a form. Defaults to nil.
  • issho (:any) - with Issho, the picker's document in a room, to show who is choosing in it: [instance: MyApp.Issho, document: "page:42/status"] (see Erabi.Issho). Defaults to nil.
  • user (:any) - the person choosing, with issho, as Issho.Actor says them. Defaults to nil.
  • sheet (:atom) - where the popup is a sheet from the bottom of the screen: on phones (:auto), :always or :never; the default is config :erabi, sheet:, else :auto. Defaults to nil. Must be one of nil, :auto, :always, or :never.
  • class (:any) - classes for the picker element. Defaults to nil.
  • tones (:boolean) - whether people may choose a skin tone. Defaults to true.
  • Global attributes are accepted. attributes for the picker element, such as phx-target; aria-describedby goes to the field. Supports all globals plus: ["form"].

Slots

  • icon - draws an option's :icon, given its name (:let={name}).

icon_picker(assigns)

A picker of one of the app's icons: a grid of the options that have an :icon, drawn by the :icon slot, with a search by their labels and keywords. It posts the option's value.

<.icon_picker field={@form[:icon]} options={@icons}>
  <:icon :let={name}><.lucide name={name} /></:icon>
</.icon_picker>

The picker is in its own entry: import "erabi/emoji".

Attributes

  • field (Phoenix.HTML.FormField) - the form field, for example @form[:status]. Defaults to nil.
  • id (:string) - the id of the picker element; the default is the field's id with _picker. Defaults to nil.
  • name (:string) - the input name, without a field. Defaults to nil.
  • value (:any) - the value, without a field. Defaults to nil.
  • options (:list) - the options: anything a <select> takes, or maps with colors, hints and icons (see Erabi.Option). Defaults to [].
  • selected (:list) - options of the chosen values that are not in options, for their labels (the options of a search). Defaults to [].
  • search (:any) - a function that finds options for a query, run in the LiveView by Erabi.Live (see the Search guide). Defaults to nil.
  • async (:boolean) - when true, the search runs in a task (start_async). Defaults to false.
  • filter (:boolean) - whether the list has a box to filter it; the default is true from 10 options. Defaults to nil.
  • label_id (:string) - the id of the element that labels the picker (aria-labelledby); a <label for> of the field works too. Defaults to nil.
  • label (:string) - the accessible name when there is no label; the default is the field name in words. Defaults to nil.
  • placeholder (:string) - the words of an empty picker. Defaults to nil.
  • rules (:any) - the rules, an Erabi.Rules or its options; give the same to Erabi.Changeset. Defaults to nil.
  • min (:integer) - a shortcut for the :min rule. Defaults to nil.
  • max (:integer) - a shortcut for the :max rule. Defaults to nil.
  • create (:boolean) - a shortcut for the :create rule. Defaults to nil.
  • required (:boolean) - Defaults to false.
  • clearable (:boolean) - whether a picker of one value has a clear button; the default is true unless required. Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • readonly (:boolean) - Defaults to false.
  • locale (:string) - a BCP 47 locale for the words and numbers; the default is config :erabi, locale:, else "en". Defaults to nil.
  • messages (:map) - words that replace the built-in ones, see Erabi.Messages. Defaults to nil.
  • on_change (:string) - an event that the picker pushes with %{"id", "value"} on each change, for a picker outside a form. Defaults to nil.
  • issho (:any) - with Issho, the picker's document in a room, to show who is choosing in it: [instance: MyApp.Issho, document: "page:42/status"] (see Erabi.Issho). Defaults to nil.
  • user (:any) - the person choosing, with issho, as Issho.Actor says them. Defaults to nil.
  • sheet (:atom) - where the popup is a sheet from the bottom of the screen: on phones (:auto), :always or :never; the default is config :erabi, sheet:, else :auto. Defaults to nil. Must be one of nil, :auto, :always, or :never.
  • class (:any) - classes for the picker element. Defaults to nil.
  • Global attributes are accepted. attributes for the picker element, such as phx-target; aria-describedby goes to the field. Supports all globals plus: ["form"].

Slots

  • icon - draws an option's :icon, given its name (:let={name}).

multi_select(assigns)

A picker of several values, shown as chips: the list stays open as people check and uncheck. min and max count the values.

Attributes

  • field (Phoenix.HTML.FormField) - the form field, for example @form[:status]. Defaults to nil.
  • id (:string) - the id of the picker element; the default is the field's id with _picker. Defaults to nil.
  • name (:string) - the input name, without a field. Defaults to nil.
  • value (:any) - the value, without a field. Defaults to nil.
  • options (:list) - the options: anything a <select> takes, or maps with colors, hints and icons (see Erabi.Option). Defaults to [].
  • selected (:list) - options of the chosen values that are not in options, for their labels (the options of a search). Defaults to [].
  • search (:any) - a function that finds options for a query, run in the LiveView by Erabi.Live (see the Search guide). Defaults to nil.
  • async (:boolean) - when true, the search runs in a task (start_async). Defaults to false.
  • filter (:boolean) - whether the list has a box to filter it; the default is true from 10 options. Defaults to nil.
  • label_id (:string) - the id of the element that labels the picker (aria-labelledby); a <label for> of the field works too. Defaults to nil.
  • label (:string) - the accessible name when there is no label; the default is the field name in words. Defaults to nil.
  • placeholder (:string) - the words of an empty picker. Defaults to nil.
  • rules (:any) - the rules, an Erabi.Rules or its options; give the same to Erabi.Changeset. Defaults to nil.
  • min (:integer) - a shortcut for the :min rule. Defaults to nil.
  • max (:integer) - a shortcut for the :max rule. Defaults to nil.
  • create (:boolean) - a shortcut for the :create rule. Defaults to nil.
  • required (:boolean) - Defaults to false.
  • clearable (:boolean) - whether a picker of one value has a clear button; the default is true unless required. Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • readonly (:boolean) - Defaults to false.
  • locale (:string) - a BCP 47 locale for the words and numbers; the default is config :erabi, locale:, else "en". Defaults to nil.
  • messages (:map) - words that replace the built-in ones, see Erabi.Messages. Defaults to nil.
  • on_change (:string) - an event that the picker pushes with %{"id", "value"} on each change, for a picker outside a form. Defaults to nil.
  • issho (:any) - with Issho, the picker's document in a room, to show who is choosing in it: [instance: MyApp.Issho, document: "page:42/status"] (see Erabi.Issho). Defaults to nil.
  • user (:any) - the person choosing, with issho, as Issho.Actor says them. Defaults to nil.
  • sheet (:atom) - where the popup is a sheet from the bottom of the screen: on phones (:auto), :always or :never; the default is config :erabi, sheet:, else :auto. Defaults to nil. Must be one of nil, :auto, :always, or :never.
  • class (:any) - classes for the picker element. Defaults to nil.
  • Global attributes are accepted. attributes for the picker element, such as phx-target; aria-describedby goes to the field. Supports all globals plus: ["form"].

Slots

  • icon - draws an option's :icon, given its name (:let={name}).

person_picker(assigns)

A picker of people and agents: avatars (an image, or initials on the person's color), agents marked as such, and me first. The people are maps or structs with :id and :name (and :avatar, :color, :kind), as users and Issho.Actors are; give them as people (or options), or find them with search.

Attributes

  • field (Phoenix.HTML.FormField) - the form field, for example @form[:status]. Defaults to nil.
  • id (:string) - the id of the picker element; the default is the field's id with _picker. Defaults to nil.
  • name (:string) - the input name, without a field. Defaults to nil.
  • value (:any) - the value, without a field. Defaults to nil.
  • options (:list) - the options: anything a <select> takes, or maps with colors, hints and icons (see Erabi.Option). Defaults to [].
  • selected (:list) - options of the chosen values that are not in options, for their labels (the options of a search). Defaults to [].
  • search (:any) - a function that finds options for a query, run in the LiveView by Erabi.Live (see the Search guide). Defaults to nil.
  • async (:boolean) - when true, the search runs in a task (start_async). Defaults to false.
  • filter (:boolean) - whether the list has a box to filter it; the default is true from 10 options. Defaults to nil.
  • label_id (:string) - the id of the element that labels the picker (aria-labelledby); a <label for> of the field works too. Defaults to nil.
  • label (:string) - the accessible name when there is no label; the default is the field name in words. Defaults to nil.
  • placeholder (:string) - the words of an empty picker. Defaults to nil.
  • rules (:any) - the rules, an Erabi.Rules or its options; give the same to Erabi.Changeset. Defaults to nil.
  • min (:integer) - a shortcut for the :min rule. Defaults to nil.
  • max (:integer) - a shortcut for the :max rule. Defaults to nil.
  • create (:boolean) - a shortcut for the :create rule. Defaults to nil.
  • required (:boolean) - Defaults to false.
  • clearable (:boolean) - whether a picker of one value has a clear button; the default is true unless required. Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • readonly (:boolean) - Defaults to false.
  • locale (:string) - a BCP 47 locale for the words and numbers; the default is config :erabi, locale:, else "en". Defaults to nil.
  • messages (:map) - words that replace the built-in ones, see Erabi.Messages. Defaults to nil.
  • on_change (:string) - an event that the picker pushes with %{"id", "value"} on each change, for a picker outside a form. Defaults to nil.
  • issho (:any) - with Issho, the picker's document in a room, to show who is choosing in it: [instance: MyApp.Issho, document: "page:42/status"] (see Erabi.Issho). Defaults to nil.
  • user (:any) - the person choosing, with issho, as Issho.Actor says them. Defaults to nil.
  • sheet (:atom) - where the popup is a sheet from the bottom of the screen: on phones (:auto), :always or :never; the default is config :erabi, sheet:, else :auto. Defaults to nil. Must be one of nil, :auto, :always, or :never.
  • class (:any) - classes for the picker element. Defaults to nil.
  • people (:list) - the people and agents to choose from. Defaults to nil.
  • me (:any) - the person who is choosing (a person, or their id): listed first, marked. Defaults to nil.
  • multiple (:boolean) - whether several people may be chosen. Defaults to false.
  • Global attributes are accepted. attributes for the picker element, such as phx-target; aria-describedby goes to the field. Supports all globals plus: ["form"].

Slots

  • icon - draws an option's :icon, given its name (:let={name}).

select(assigns)

A picker of one value from a list, as a <select>: a box that opens the list, with typeahead, and a box to filter a long list.

Attributes

  • field (Phoenix.HTML.FormField) - the form field, for example @form[:status]. Defaults to nil.
  • id (:string) - the id of the picker element; the default is the field's id with _picker. Defaults to nil.
  • name (:string) - the input name, without a field. Defaults to nil.
  • value (:any) - the value, without a field. Defaults to nil.
  • options (:list) - the options: anything a <select> takes, or maps with colors, hints and icons (see Erabi.Option). Defaults to [].
  • selected (:list) - options of the chosen values that are not in options, for their labels (the options of a search). Defaults to [].
  • search (:any) - a function that finds options for a query, run in the LiveView by Erabi.Live (see the Search guide). Defaults to nil.
  • async (:boolean) - when true, the search runs in a task (start_async). Defaults to false.
  • filter (:boolean) - whether the list has a box to filter it; the default is true from 10 options. Defaults to nil.
  • label_id (:string) - the id of the element that labels the picker (aria-labelledby); a <label for> of the field works too. Defaults to nil.
  • label (:string) - the accessible name when there is no label; the default is the field name in words. Defaults to nil.
  • placeholder (:string) - the words of an empty picker. Defaults to nil.
  • rules (:any) - the rules, an Erabi.Rules or its options; give the same to Erabi.Changeset. Defaults to nil.
  • min (:integer) - a shortcut for the :min rule. Defaults to nil.
  • max (:integer) - a shortcut for the :max rule. Defaults to nil.
  • create (:boolean) - a shortcut for the :create rule. Defaults to nil.
  • required (:boolean) - Defaults to false.
  • clearable (:boolean) - whether a picker of one value has a clear button; the default is true unless required. Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • readonly (:boolean) - Defaults to false.
  • locale (:string) - a BCP 47 locale for the words and numbers; the default is config :erabi, locale:, else "en". Defaults to nil.
  • messages (:map) - words that replace the built-in ones, see Erabi.Messages. Defaults to nil.
  • on_change (:string) - an event that the picker pushes with %{"id", "value"} on each change, for a picker outside a form. Defaults to nil.
  • issho (:any) - with Issho, the picker's document in a room, to show who is choosing in it: [instance: MyApp.Issho, document: "page:42/status"] (see Erabi.Issho). Defaults to nil.
  • user (:any) - the person choosing, with issho, as Issho.Actor says them. Defaults to nil.
  • sheet (:atom) - where the popup is a sheet from the bottom of the screen: on phones (:auto), :always or :never; the default is config :erabi, sheet:, else :auto. Defaults to nil. Must be one of nil, :auto, :always, or :never.
  • class (:any) - classes for the picker element. Defaults to nil.
  • Global attributes are accepted. attributes for the picker element, such as phx-target; aria-describedby goes to the field. Supports all globals plus: ["form"].

Slots

  • icon - draws an option's :icon, given its name (:let={name}).

tags(assigns)

Chips that people type: suggestions as they type, Enter or a comma to add one, Backspace to take the last one back. With create, a new tag is "Create “…”" at the end of the list, under the rules' pattern and lengths.

Attributes

  • field (Phoenix.HTML.FormField) - the form field, for example @form[:status]. Defaults to nil.
  • id (:string) - the id of the picker element; the default is the field's id with _picker. Defaults to nil.
  • name (:string) - the input name, without a field. Defaults to nil.
  • value (:any) - the value, without a field. Defaults to nil.
  • options (:list) - the options: anything a <select> takes, or maps with colors, hints and icons (see Erabi.Option). Defaults to [].
  • selected (:list) - options of the chosen values that are not in options, for their labels (the options of a search). Defaults to [].
  • search (:any) - a function that finds options for a query, run in the LiveView by Erabi.Live (see the Search guide). Defaults to nil.
  • async (:boolean) - when true, the search runs in a task (start_async). Defaults to false.
  • filter (:boolean) - whether the list has a box to filter it; the default is true from 10 options. Defaults to nil.
  • label_id (:string) - the id of the element that labels the picker (aria-labelledby); a <label for> of the field works too. Defaults to nil.
  • label (:string) - the accessible name when there is no label; the default is the field name in words. Defaults to nil.
  • placeholder (:string) - the words of an empty picker. Defaults to nil.
  • rules (:any) - the rules, an Erabi.Rules or its options; give the same to Erabi.Changeset. Defaults to nil.
  • min (:integer) - a shortcut for the :min rule. Defaults to nil.
  • max (:integer) - a shortcut for the :max rule. Defaults to nil.
  • create (:boolean) - a shortcut for the :create rule. Defaults to nil.
  • required (:boolean) - Defaults to false.
  • clearable (:boolean) - whether a picker of one value has a clear button; the default is true unless required. Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • readonly (:boolean) - Defaults to false.
  • locale (:string) - a BCP 47 locale for the words and numbers; the default is config :erabi, locale:, else "en". Defaults to nil.
  • messages (:map) - words that replace the built-in ones, see Erabi.Messages. Defaults to nil.
  • on_change (:string) - an event that the picker pushes with %{"id", "value"} on each change, for a picker outside a form. Defaults to nil.
  • issho (:any) - with Issho, the picker's document in a room, to show who is choosing in it: [instance: MyApp.Issho, document: "page:42/status"] (see Erabi.Issho). Defaults to nil.
  • user (:any) - the person choosing, with issho, as Issho.Actor says them. Defaults to nil.
  • sheet (:atom) - where the popup is a sheet from the bottom of the screen: on phones (:auto), :always or :never; the default is config :erabi, sheet:, else :auto. Defaults to nil. Must be one of nil, :auto, :always, or :never.
  • class (:any) - classes for the picker element. Defaults to nil.
  • Global attributes are accepted. attributes for the picker element, such as phx-target; aria-describedby goes to the field. Supports all globals plus: ["form"].

Slots

  • icon - draws an option's :icon, given its name (:let={name}).