Browse Components
Tag Input
Enter and manage multiple text values in one field.
Basic
Add a tag with Enter or comma. Paste several tags separated by commas or line breaks.
Press Enter or comma to add a tag.
View Code
<div class="field">
<label for="project-tags">
Project Tags
</label>
<input
class="input"
id="project-tags"
name="tags"
data-tag-input
value="Design, Development"
placeholder="Add a tag"
aria-describedby="project-tags-help"
>
<p class="muted" id="project-tags-help">
Press Enter or comma to add a tag.
</p>
</div>Limits
Add up to three tags, with at most 20 characters each. Duplicate tags are not added.
Press Enter or comma to add a tag.
View Code
<div class="field">
<label for="project-tags">
Project Tags
</label>
<input
class="input"
id="project-tags"
name="tags"
data-tag-input
data-max-tags="3"
data-tag-length="20"
value="Design, Development"
placeholder="Add a tag"
aria-describedby="project-tags-help"
>
<p class="muted" id="project-tags-help">
Press Enter or comma to add a tag.
</p>
</div>Validation and reset
At least one tag is required. The field uses shared validation and resets to its original values.
View Code
<form class="stack" data-validate="check">
<div class="field">
<label for="project-tags">
Project Tags
<span class="required-marker" aria-hidden="true">
*
</span>
</label>
<input
class="input"
id="project-tags"
name="tags"
data-tag-input
required
value=""
placeholder="Add a tag"
aria-describedby="project-tags-help"
>
<p class="muted" id="project-tags-help">
Press Enter or comma to add a tag.
</p>
</div>
<p class="muted">
Fields marked * are required.
</p>
<div class="cluster">
<button class="btn" type="submit">
Save Tags
</button>
<button class="btn secondary" type="reset">
Reset
</button>
</div>
<p data-validate-success hidden>
Tags are ready to save.
</p>
</form>Disabled and read-only
Disabled fields cannot be edited or submitted. Read-only values remain selectable and submit with the form.
Press Enter or comma to add a tag.
Press Enter or comma to add a tag.
View Code
<div class="field">
<label for="project-tags">
Project Tags
</label>
<input
class="input"
id="project-tags"
name="tags"
data-tag-input
disabled
value="Design, Development"
placeholder="Add a tag"
aria-describedby="project-tags-help"
>
<p class="muted" id="project-tags-help">
Press Enter or comma to add a tag.
</p>
</div>
<div class="field">
<label for="readonly-tags">
Read-only Tags
</label>
<input
class="input"
id="readonly-tags"
name="tags"
data-tag-input
readonly
value="Design, Development"
placeholder="Add a tag"
aria-describedby="readonly-tags-help"
>
<p class="muted" id="readonly-tags-help">
Press Enter or comma to add a tag.
</p>
</div>Right-to-left
Tags and controls follow the reading direction.
לחצו על Enter או פסיק להוספת תגית.
View Code
<div dir="rtl">
<div class="field">
<label for="project-tags">
תגיות הפרויקט
</label>
<input
class="input"
id="project-tags"
name="tags"
data-tag-input
data-tags-label="תגיות"
data-remove-label="הסרת {tag}"
data-added-message="התגית נוספה."
data-removed-message="התגית {tag} הוסרה."
data-duplicate-message="התגית כבר קיימת."
data-length-message="כל תגית יכולה להכיל עד 80 תווים."
value="עיצוב, פיתוח"
placeholder="הוספת תגית"
aria-describedby="project-tags-help"
>
<p class="muted" id="project-tags-help">
לחצו על Enter או פסיק להוספת תגית.
</p>
</div>
</div>Install
Add this markup to your page. The build includes the required styles and behavior automatically.
<div class="field">
<label for="project-tags">
Project Tags
</label>
<input
class="input"
id="project-tags"
name="tags"
data-tag-input
value="Design, Development"
placeholder="Add a tag"
aria-describedby="project-tags-help"
>
<p class="muted" id="project-tags-help">
Press Enter or comma to add a tag.
</p>
</div>New to Layout UI? Follow the Install Guide to set up your project.