Tags input for Phoenix LiveView forms. Behavior follows 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

Pass value for the initial tag list on mount. The machine owns updates after that unless you use set_value/2 or form field.

Form

For cross-cutting invalid styling and error presentation, see the Forms guide. With field={@form[:…]}, pass auto_invalid for alert borders from visible errors, or invalid={true} to force the alert state.

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. 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 ui-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/corex.css";

Stack modifiers on the host (class on <.tags_input>). Combine axes, for example tags-input ui-accent ui-size-lg.

Axes: Semantic (ui-accent, ui-brand, ui-alert, ui-info, ui-success), Size (ui-size-sm … ui-size-xl), Radius (ui-rounded-*). No variant axis. See the modifier guide.

Semantic modifiers set palette variables for focus and accent ink on the typing field and tag chips. The typing surface stays the shared ui-input treatment. Tags input has no variant axis.

Semantic

Palette for focus and accent ink on the typing field and tag chips.

Size