TAG INPUT: Interactive tag container for multi-value form inputs
COMPOSES: Tag (.tag, .tag-close) | Form Controls (visual alignment)
A form-field-like wrapper that holds removable tags with an inline text input. Used for multi-select inputs, filter builders, and any UI where users manage a list of values. Visually aligns with .form-control (same border, radius, focus ring).
Pre-populated: Tags are already inside the container. Click the container to focus the input. Type text and press Enter to add a tag. Press Backspace on an empty input to remove the last tag.
<div class="tw-tag-input" data-controller="tag-input">...</div>
Empty state: When no tags are present, the placeholder text guides the user. Type a value and press Enter to add the first tag.
Variant value: Set data-tag-input-variant-value to apply a color variant to dynamically added tags. Pre-populated tags can use any variant class.
Size variants: .tag-input-sm for compact forms, default for standard use, .tag-input-lg for prominent inputs.
Small
Default
Large
<div class="tw-tag-input tw-tag-input-sm">...</div>
<div class="tw-tag-input tw-tag-input-lg">...</div>
Validation: Add .is-valid or .is-invalid to show green or red border and focus ring. Pair with form-group helper text for error messages.
Year group selection confirmed.
Please select at least one year group.
Disabled: Add .tag-input-disabled to gray out the container and prevent all interaction. Tags inside become non-interactive automatically.
<div class="tw-tag-input tw-tag-input-disabled">...</div>
Max tags: Set data-tag-input-max-tags-value to limit the number of tags. Once the limit is reached, new entries are silently ignored. This example allows a maximum of 3 tags.
data-tag-input-max-tags-value="3"