# `LineaUI.Components.Select`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/select.ex#L1)

LineOne's selects: the styled native `<select>` of the Select page and the searchable
listbox of the Tom Select page, with chips, groups, a clear button and created options.

    <.select native label="What type of event is it?" options={~w(Wedding Birthday Other)} />
    <.select native variant="filled" shape="pill" size="sm" field={@form[:kind]} options={@kinds} />
    <.select native inline shape="pill" size="sm" name="period" options={~w(Week Month Year)} />

    <.select field={@form[:state]} options={[{"Alabama", "AL"}, {"Alaska", "AK"}]} multiple removable
             placeholder="Select a state..." />
    <.select field={@form[:author]} options={@authors} on_search="search_authors" target={@myself}>
      <:option :let={author}>{author.label} · {author.job}</:option>
    </.select>

Options are strings, `{label, value}` tuples, keyword entries, or maps with `:label` and
`:value` (other keys reach the `:option` and `:item` slots); `{group_label, [options]}` is a
group. See `LineaUI.Components.Select.Options`.

The listbox submits through a hidden `<select>` named like the field (`name[]` when
`multiple`), and fires a bubbling `input` event when the person changes the choice, so a
surrounding `phx-change` runs. A value the server sends wins over the one in the browser;
re-rendering the same value does nothing.

# `select`

Renders a select.

With `native` it is the browser's `<select>` in LineOne's look; otherwise the listbox.

Events: with `on_search` the listbox stops filtering on its own and pushes
`on_search` with `%{"id" => id, "query" => text}` as the person types (after `debounce`
ms), to `target` or to the LiveView/LiveComponent the select is in; the server answers by
re-rendering `options`.

## Attributes

* `id` (`:string`) - Defaults to the field id, or a generated one.
* `name` (`:string`) - Defaults to the field name (with `[]` when several values).
* `value` (`:any`) - Defaults to the field value.
* `field` (`Phoenix.HTML.FormField`) - A form field: fills `id`, `name`, `value` and `errors`. Defaults to `nil`.
* `label` (`:string`) - Defaults to `nil`.
* `help` (`:string`) - Defaults to `nil`.
* `errors` (`:list`) - Defaults to `[]`.
* `options` (`:list`) - Options and groups, see the module doc. Defaults to `[]`.
* `prompt` (`:string`) - Native only: a first option with an empty value. Defaults to `nil`.
* `placeholder` (`:string`) - Defaults to `nil`.
* `multiple` (`:boolean`) - Defaults to `false`.
* `disabled` (`:boolean`) - Defaults to `false`.
* `native` (`:boolean`) - The browser's own `<select>`. Defaults to `false`.
* `variant` (`:string`) - Native only: bordered or filled. Defaults to `"outline"`. Must be one of `"outline"`, or `"filled"`.
* `size` (`:string`) - Native only. Defaults to `"md"`. Must be one of `"sm"`, `"md"`, or `"lg"`.
* `shape` (`:string`) - Native only. Defaults to `"rounded"`. Must be one of `"rounded"`, or `"pill"`.
* `inline` (`:boolean`) - Native only: the select is as wide as its content (`w-auto pr-9`) instead of filling its parent, for period pills in a card header. Defaults to `false`.
* `removable` (`:boolean`) - A remove button on each chip. Defaults to `false`.
* `clearable` (`:boolean`) - A button that removes every choice. Defaults to `false`.
* `clear_label` (`:string`) - Defaults to `"Clear"`.
* `remove_label` (`:string`) - Defaults to `"Remove"`.
* `create` (`:boolean`) - What is typed can be added as a new option. Defaults to `false`.
* `create_label` (`:string`) - The text before the typed term in the create row. Defaults to `"Add"`.
* `persist` (`:boolean`) - A created option stays in the list after it is removed. Defaults to `true`.
* `restore_on_backspace` (`:boolean`) - Backspace puts the last chip back into the input as text. Defaults to `false`.
* `max` (`:integer`) - How many options can be chosen. Defaults to `nil`.
* `no_results` (`:string`) - Defaults to `"No results found"`.
* `on_search` (`:string`) - Defaults to `nil`.
* `debounce` (`:integer`) - Defaults to `300`.
* `target` (`:any`) - Defaults to `nil`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted. Supports all globals plus: `["form", "autocomplete", "required"]`.
## Slots

* `option` - How an option shows in the list; gets the option map (`label`, `value`, `data`).
* `item` - How a chosen option shows in the control; gets the option map.

---

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