Tags input

Each token is a Pill with its own ✕. The text field below the tokens is Mob's native TextField, and its text is called the draft. The draft field draws no box or underline of its own, so the border of the control is the only outline.

The screen owns the state: the tags list and the draft text. Typing sends the draft to the screen through on_draft. The return key sends on_add, and a tap on a token's ✕ sends on_remove.

A phone has no keydown to hook, but a text field reports a submit when the return key is pressed, and the component sets the key to done. The submit event is a bare notification with no text, because the bridge passes only a handle with it. So the screen commits the draft it already holds from on_draft and clears it.

Two helpers do the list work. MishkaTagsInput.add/3 trims the draft, ignores blank input and rejects a duplicate, so adding elixir twice leaves one tag. Pass allow_duplicates: true to allow repeats. MishkaTagsInput.remove/2 removes a tag by value.

How tokens wrap

Neither renderer has a flow layout, and nothing on the Elixir side of the bridge can measure text. A single row of tokens would run off the edge, so MishkaTagsInput.wrap/2 packs the tags into rows with a character budget. Each tag costs its length plus 5, and the budget is wrap_chars, which defaults to 34. A tag longer than the whole budget gets a row of its own.

The budget is an estimate, so the default leans toward under-packing. A sparse row looks sparse, while an over-packed row squeezes its last token. Raise wrap_chars for a wider control and lower it for a narrow one.

Run this from your Mob app's root to add the component to lib/<app>/components/:

mix mishka.ui.gen.mob tags_input

The generator registers the tag, so you can use it in ~MOB markup. Tags Input is built on the Pill component, so the generator creates pill as well, with the same prefixes. It also copies the shared Event helper module, unless you pass --no-kit. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the module is MishkaTagsInput and the tag is <MishkaTagsInput>. Without a prefix, the tag is <TagsInput>.

Pass the tags list and the draft text, and give each event its own tag: on_draft, on_add and on_remove. The user types a draft, presses return to commit it and taps a token's ✕ to remove that tag. The submit event carries no text, so the handler commits the draft the screen already holds with MishkaTagsInput.add/3 and then clears it.

Add and remove tags

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a tap. Each token's close mark removes it.

<MishkaTagsInput
  tags={@tags}
  draft={@draft}
  on_draft={:draft}
  on_add={:add}
  on_remove={:remove}
/>

# submit carries no text — commit the draft you already hold
def handle_info({:submit, :add}, socket) do
  {:noreply, socket
     |> assign(:tags, MishkaTagsInput.add(socket.assigns.tags, socket.assigns.draft))
     |> assign(:draft, "")}
end

The control's box comes from props, so you can remove it. Set border_width={0} and padding={0}, with background={:background} to match the screen, and only the tokens and the draft field remain.

Tags input without a box

LTR RTL

Preview

Show the whole example Show less

<MishkaTagsInput tags={@tags} border_width={0} padding={0} background={:background} />

With no tags, the control is just its draft field and its placeholder. disabled={true} mutes the tokens and the draft field and unwires everything.

Empty and disabled tags input

LTR RTL

Preview

Show the whole example Show less

<MishkaTagsInput tags={[]} placeholder="Nothing yet" />
<MishkaTagsInput tags={["locked"]} disabled={true} />

Props of the <MishkaTagsInput> tag.

Your screen receives these messages in handle_info/2.

• on_draft sends {:change, tag, text} as the draft is typed.
• on_add sends {:submit, tag} when the user presses return. It carries no text, so commit the draft you already hold, as the first example shows.
• on_remove sends {:tap, {tag, tag_string}} when the user taps a token's ✕, where tag_string is the tag to remove.

def handle_info({:change, :draft, text}, socket) do
  {:noreply, assign(socket, :draft, text)}
end

def handle_info({:tap, {:remove, tag}}, socket) do
  {:noreply, assign(socket, :tags, MishkaTagsInput.remove(socket.assigns.tags, tag))}
end

• name and input_name are not ported, because they are form plumbing.
• The *_class attributes are not ported. The control's box is a set of props.

• Headless Tags Input, the web component this one ports.
• Mob Pill, the token this control is built on.
• Mob Pills Input, a bordered control that holds pills you supply beside a text field.
• Mob Autocomplete, a text field that suggests completions as you type.
• Mob components, the full list of native components.