Phoenix implementation of Zag.js Tags Input.

Anatomy

Minimal

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

With label

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

Translation

<.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>

API

Requires a stable id on <.tags_input>.

Events

Pick an event name and pass it to on_* on <.tags_input>.

Server events

on_value_change

<.tags_input
  class="tags-input"
  value={["lorem", "duis", "donec"]}
  on_value_change="tags_value_changed"
>
  <:label>Tags</:label>
  <:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>

def handle_event("tags_value_changed", %{"id" => _id, "value" => value}, socket) do
  {:noreply, assign(socket, :tags, value)}
end

Client events

Patterns

Controlled

<.tags_input
  class="tags-input"
  controlled
  value={@tags}
  on_value_change="tags_changed"
>
  <:label>Keywords</:label>
  <:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>

def handle_event("tags_changed", %{"value" => value}, socket) do
  {:noreply, assign(socket, :tags, value)}
end

Form

For cross-cutting invalid styling and error presentation, see the Forms guide. Pass invalid={Corex.FormField.invalid?(@form[:tags])} when you want alert borders after validation.

With field={f[:tags]}, each tag is submitted as its own request param (post[tags][]), so Phoenix receives a list:

%{"post" => %{"tags" => ["alpha", "beta"]}}

Use an Ecto field typed {:array, :string} (or cast a list in your changeset). A :string column with comma-splitting in the changeset is not supported by this component.

When there are no tags, the component still submits one name[] hidden input (empty string) so the form param is present. Phoenix decodes that as [""]; Ecto cast/3 on {:array, :string} turns it into [].

validate_required/3 alone does not treat an empty list as blank. Pair {:array, :string} with validate_length(:tags, min: 1) (or equivalent) so cleared tags surface errors.

The delimiter attribute only controls how new tags are split when typing or pasting in the control (default ,). It does not affect form submission.

In LiveView, rebuild the form from the changeset on phx-change so validation stays in sync. Do not use controlled on form examples; use field={@form[:tags]} only.

embedded_schema do
  field :tags, {:array, :string}
end

def changeset(profile, attrs) do
  profile
  |> cast(attrs, [:tags])
  |> validate_required([:tags])
  |> validate_length(:tags, min: 1)
end

<.form for={@form} phx-change="validate" phx-submit="save">
  <.tags_input field={@form[:tags]} class="tags-input">
    <:label>Keywords</:label>
    <:close><.heroicon name="hero-x-mark" /></:close>
    <:error :let={msg}>
      <.heroicon name="hero-exclamation-circle" />
      {msg}
    </:error>
  </.tags_input>
  <.action type="submit" class="button button--accent">Save</.action>
</.form>

Style

Target parts with data-scope and data-part, or use Corex Design: import tokens and tags-input.css, then set class="tags-input" on <.tags_input>.

[data-scope="tags-input"][data-part="root"] {}
[data-scope="tags-input"][data-part="control"] {}
[data-scope="tags-input"][data-part="input"] {}

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/tags-input.css";

Stack modifiers on the host (class on <.tags_input>).

Color

Size