LineaUI.Components.TagsInput (linea_ui v0.1.1)

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.

Summary

Functions

tags_input(assigns)

Renders a tag input.

Functions

tags_input(assigns)

Renders a tag input.

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 [].
  • 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"].