TagInput

Implemented Input

Multi-value badge input for tags and recipients.

Kumo reference: kumo-ui.com/components/tag-input/

Presentation commands show demo feedback. Read the interaction guide to connect real actions.

Default tags

Tags

production edge-worker cloudflare

Show template

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/tag_input.html" with name="tags_default_tags" label="Tags" value=initial_tags only %}
</div>

Maximum tags

Tags

production edge-worker cloudflare

Up to four tags.

Show template

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/tag_input.html" with name="tags_maximum_tags" label="Tags" value=initial_tags max_values=4 description="Up to four tags." only %}
</div>

Read only

Tags

production edge-worker cloudflare

Show template

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/tag_input.html" with name="tags_read_only" label="Tags" value=initial_tags readonly=True only %}
</div>

Suggestions

Tags

production edge-worker cloudflare

Show template

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/tag_input.html" with name="tags_suggestions" label="Tags" value=initial_tags list="tag_suggestions" only %}<datalist id="tag_suggestions"><option value="development"><option value="staging"><option value="production"></datalist>
</div>

Localized messages

Etichete

django

Show template

{% load wdj %}
{% include "wdj/components/tag_input.html" with id="audit-local-tags" label="Etichete" max_values=2 labels=audit_localized_tags value="django" only %}

API Reference

Prop	Type	Default	Description
name	string	unset	Name; pass the documented value shown in the examples.
value	list[str] / CSV	unset	Value; pass the documented value shown in the examples.
label	string	unset	Visible accessible label. Supply an explicit aria-label via attrs when the control is bare.
description	string	unset	Description; pass the documented value shown in the examples.
error	string	unset	Validation message; implies error styling and accessible error association.
placeholder	string	unset	Placeholder; pass the documented value shown in the examples.
max_values	number	unset	Max values; pass the documented value shown in the examples.
disabled	bool	False	Disabled; pass the documented value shown in the examples.
readonly	bool	False	Readonly; pass the documented value shown in the examples.
list	string	unset	List; pass the documented value shown in the examples.
id	string	unset	Stable unique DOM ID; important for HTMX targets and focus restoration.
labels	dict	unset	Labels; pass the documented value shown in the examples.
attrs	dict	{}	Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only.
class	string	""	Class; pass the documented value shown in the examples.

Accessibility notes

Every interactive component keeps real semantics and keyboard support: native controls where possible, ARIA only where necessary, and a visible focus ring. See the Accessibility page for the shared contract.

Read the accessibility contract