LineaUI.Components.TagsInput (linea_ui v0.3.0)

Copy Markdown View Source

LineOne's tag input (the Tom Select page's Input Tags demos): what is typed becomes a chip on Enter, Tab or the delimiter, chips are removed with Backspace or their remove button.

<.tags_input label="Enter Tags:" placeholder="Enter tags" field={@form[:tags]} />
<.tags_input name="tags" value={["awesome", "neat"]} removable restore_on_backspace />
<.tags_input name="tags" value="clear,items" clearable persist={false} max={5} />

value is a list of strings or a comma separated string. The tags are submitted as name[] (plus an empty name[] so an empty list still reaches the server) through a hidden <select multiple>, and each change fires a bubbling input event for phx-change. suggestions are offered in the list while typing.

Picking from a server-searched list

With create={false} only listed options can be chosen, and with on_search the server does the search: the typed text is pushed (debounced) and the LiveView answers by re-rendering options. Chips show the labels; the form gets the values as name[]. selected_options gives the labels of the chosen values that are not in the current options (after a search narrowed them).

<.tags_input
  field={@form[:tag_ids]}
  options={@tag_results}
  selected_options={@chosen_tags}
  create={false}
  on_search="search_tags"
  target={@myself}
  removable
  placeholder="Search tags"
/>

def handle_event("search_tags", %{"query" => query}, socket),
  do: {:noreply, assign(socket, :tag_results, Tags.search(query))}

Summary

Functions

tags_input(assigns)

Renders a tag input.

Functions

tags_input(assigns)

Renders a tag input.

Events: with on_search, %{"id" => id, "query" => text} is pushed to target (or the LiveView) as the person types, debounce ms after the last key; the list then shows the options the server renders, unfiltered.

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) - Defaults to nil.
  • label (:string) - Defaults to nil.
  • help (:string) - Defaults to nil.
  • errors (:list) - Defaults to [].
  • placeholder (:string) - Defaults to nil.
  • suggestions (:list) - Options offered while typing, in any select option shape. Defaults to [].
  • options (:list) - The options to pick from (any select option shape); suggestions by another name. Defaults to nil.
  • selected_options (:list) - Options whose labels the chips of chosen values use when they are not in options. Defaults to [].
  • create (:boolean) - Typed text becomes a tag; false allows only listed options (option-picking mode). Defaults to true.
  • on_search (:string) - Event pushed with the typed text; the server then renders options. Defaults to nil.
  • debounce (:integer) - Milliseconds between the last key and on_search. Defaults to 300.
  • removable (:boolean) - A remove button on each tag. Defaults to false.
  • clearable (:boolean) - A button that removes every tag. Defaults to false.
  • clear_label (:string) - Defaults to "Clear".
  • remove_label (:string) - Defaults to "Remove".
  • create_label (:string) - Defaults to "Add".
  • persist (:boolean) - A removed tag stays in the list of suggestions. Defaults to true.
  • restore_on_backspace (:boolean) - Defaults to false.
  • max (:integer) - How many tags can be added. Defaults to nil.
  • no_results (:string) - Defaults to "No results found".
  • disabled (:boolean) - Defaults to false.
  • target (:any) - Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["form"].