Tags input component for PhiaUI.

Provides tags_input/1 — a multi-tag input field that renders existing tags as removable badge chips and lets users add new tags by typing and pressing Enter (or a configurable separator character).

Tags are managed client-side by the PhiaTagsInput JS hook, which handles:

• Adding a tag on Enter or separator key
• Removing a tag via the × button or Backspace on an empty input
• Deduplication (ignores duplicate values)
• Syncing the hidden <input> with the current tag CSV for form submission

The component integrates with Phoenix.HTML.FormField so changeset validation errors are displayed automatically.

When to use

Use tags_input/1 for any field that accepts a variable number of string values — article labels, skill tags, email recipients, keyword lists, etc.

Registration

Register the hook in app.js:

import PhiaTagsInput from "./hooks/tags_input"
let liveSocket = new LiveSocket("/live", Socket, {
  hooks: { PhiaTagsInput }
})

Basic form example

<.form for={@form} phx-submit="save_article">
  <.tags_input
    field={@form[:tags]}
    label="Tags"
    placeholder="Add a tag..."
  />
  <.button type="submit">Save</.button>
</.form>

Custom separator

By default, pressing , (comma) or Enter adds a tag. You can change the separator to ; or any other character:

<.tags_input
  field={@form[:emails]}
  label="Recipients"
  placeholder="Type an email and press Enter..."
  separator=";"
/>

Value formats

The component accepts the field value in either format:

Empty strings and whitespace-only values are filtered out automatically.

Changeset integration

Tags are serialised as a comma-separated string in the hidden input. In your changeset, cast and split the CSV field:

defmodule MyApp.Article do
  use Ecto.Schema
  import Ecto.Changeset

  schema "articles" do
    field :tags, {:array, :string}
  end

  def changeset(article, attrs) do
    # tags arrive as CSV string "elixir,phoenix" from the form
    tags =
      case attrs["tags"] do
        nil -> []
        csv -> String.split(csv, ",", trim: true)
      end

    article
    |> cast(Map.put(attrs, "tags", tags), [:tags])
    |> validate_required([:tags])
  end
end

Alternatively, store tags as a single delimited string and split on read.