Tags input

Anatomy

Label slot, tag chips, input control, and clear action. Pass Corex.TagsInput.Translation to customize labels.

Hex doc

Phoenix

Minimal

alpha

beta

    <.tags_input class="tags-input" value={["alpha", "beta"]}>
  <:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>

With label

Translation

Keywords

lorem

duis

    <.tags_input
  class="tags-input"
  value={["lorem", "duis"]}
  translation={%Corex.TagsInput.Translation{
    placeholder: "Add lorem or duis",
    delete_tag_trigger_label: "Remove %{tag}",
    tag_edited: "Edit %{tag}. Press enter to save or escape to cancel."
  }}
>
  <:label>Keywords</:label>
  <:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>