Tags Input · API
Set, add, and clear tags from LiveView, client bindings, or a DOM dispatch.
Hex doc
Phoenix
Set Value (Client Binding)
donec
<.action phx-click={Corex.TagsInput.set_value("tags-api-set-client", ["lorem", "duis"])} class="button button--sm">
Set lorem and duis
</.action>
<.tags_input class="tags-input" value={["donec"]}>
<:label>Tags</:label>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
Set Value (Client JS / dispatch)
donec
<.action
phx-click={JS.dispatch("corex:tags-input:set-value",
to: "#tags-api-set-js",
detail: %{value: ["lorem", "duis"]},
bubbles: false
)}
class="button button--sm"
>
Set lorem and duis
</.action>
<.tags_input class="tags-input" value={["donec"]}>
<:label>Tags</:label>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
const el = document.getElementById("tags-api-set-js");
el?.dispatchEvent(
new CustomEvent("corex:tags-input:set-value", {
bubbles: false,
detail: { value: ["lorem", "duis"] },
})
);
const el: HTMLElement | null = document.getElementById("tags-api-set-js");
el?.dispatchEvent(
new CustomEvent<{ value: string[] }>("corex:tags-input:set-value", {
bubbles: false,
detail: { value: ["lorem", "duis"] },
})
);
Set Value (Server)
donec
<.action phx-click="api_tags_set_value_server" class="button button--sm">
Set lorem and duis
</.action>
<.tags_input class="tags-input" value={["donec"]}>
<:label>Tags</:label>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
def handle_event("api_tags_set_value_server", _params, socket) do
{:noreply, Corex.TagsInput.set_value(socket, "tags-api-set-server", ["lorem", "duis"])}
end
Add Value (Client Binding)
lorem
donec
<.action phx-click={Corex.TagsInput.add_value("tags-api-add-client", "duis")} class="button button--sm">
Add duis
</.action>
<.tags_input class="tags-input" value={["lorem", "donec"]}>
<:label>Tags</:label>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
Add Value (Client JS / dispatch)
lorem
donec
<.action
phx-click={JS.dispatch("corex:tags-input:add-value",
to: "#tags-api-add-js",
detail: %{value: "duis"},
bubbles: false
)}
class="button button--sm"
>
Add duis
</.action>
<.tags_input class="tags-input" value={["lorem", "donec"]}>
<:label>Tags</:label>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
const el = document.getElementById("tags-api-add-js");
el?.dispatchEvent(
new CustomEvent("corex:tags-input:add-value", {
bubbles: false,
detail: { value: "duis" },
})
);
const el: HTMLElement | null = document.getElementById("tags-api-add-js");
el?.dispatchEvent(
new CustomEvent<{ value: string }>("corex:tags-input:add-value", {
bubbles: false,
detail: { value: "duis" },
})
);
Add Value (Server)
lorem
donec
<.action phx-click="api_tags_add_value_server" class="button button--sm">
Add duis
</.action>
<.tags_input class="tags-input" value={["lorem", "donec"]}>
<:label>Tags</:label>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
def handle_event("api_tags_add_value_server", _params, socket) do
{:noreply, Corex.TagsInput.add_value(socket, "tags-api-add-server", "duis")}
end
Clear (Client Binding)
lorem
duis
donec
<.action phx-click={Corex.TagsInput.clear_value("tags-api-clear-client")} class="button button--sm">
Clear all
</.action>
<.action phx-click={Corex.TagsInput.remove_value("tags-api-clear-client", "lorem")} class="button button--sm">
Clear lorem
</.action>
<.tags_input class="tags-input" value={["lorem", "duis", "donec"]}>
<:label>Tags</:label>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
Clear (Client JS / dispatch)
lorem
duis
<.action
phx-click={JS.dispatch("corex:tags-input:clear-value", to: "#tags-api-clear-js", bubbles: false)}
class="button button--sm"
>
Clear all
</.action>
<.action
phx-click={JS.dispatch("corex:tags-input:remove-value",
to: "#tags-api-clear-js",
detail: %{value: "lorem"},
bubbles: false
)}
class="button button--sm"
>
Clear lorem
</.action>
<.tags_input class="tags-input" value={["lorem", "duis"]}>
<:label>Tags</:label>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
const el = document.getElementById("tags-api-clear-js");
el?.dispatchEvent(new CustomEvent("corex:tags-input:clear-value", { bubbles: false }));
const el: HTMLElement | null = document.getElementById("tags-api-clear-js");
el?.dispatchEvent(new CustomEvent("corex:tags-input:clear-value", { bubbles: false }));
Clear
lorem
duis
donec
<.action phx-click="api_tags_clear_all_server" class="button button--sm">
Clear all
</.action>
<.action phx-click="api_tags_clear_lorem_server" class="button button--sm">
Clear lorem
</.action>
<.tags_input class="tags-input" value={["lorem", "duis", "donec"]}>
<:label>Tags</:label>
<:close><.heroicon name="hero-x-mark" /></:close>
</.tags_input>
def handle_event("api_tags_clear_all_server", _params, socket) do
{:noreply, Corex.TagsInput.clear_value(socket, "tags-api-clear-server")}
end
def handle_event("api_tags_clear_lorem_server", _params, socket) do
{:noreply, Corex.TagsInput.remove_value(socket, "tags-api-clear-server", "lorem")}
end