# `Erabi.Components`
[🔗](https://github.com/hattoriai/erabi/blob/v0.1.0/lib/erabi/components.ex#L1)

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.

# `color_picker`

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`

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`

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`

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`

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`

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.Actor`s 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`

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`

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}`).

---

*Consult [api-reference.md](api-reference.md) for complete listing*