Tag input
Chips inside an input-like container. Enter adds, Backspace removes the last.
Examples
Tag input
design
q4
Anatomy
.tag-input | Filled, wrapping row. Draws the focus ring when the input inside has focus. |
> .chip | One chip per tag, each with a remove <button data-dismiss=".chip">. |
> input | The typing field, last. Takes the remaining width, at least 8 characters. |
API
| Attribute | Values | Description |
|---|---|---|
data-dismiss | .chip | On a chip's button: aequitas.js removes the closest .chip on click. |
Behaviour
Enter in the input turns its text into a chip, with a labelled remove button, placed before the input; Backspace in the empty input removes the chip before it; a chip's remove button removes it and moves focus to the next chip or the input; a click on the container's empty space focuses the input. The chips are markup only, not form values: read them from the DOM or mirror them into a hidden input. Without aequitas.js the chips render but adding and removing is up to you.
From aequitas.js. It initialises itself and enhances markup added later on its own, so it works the same in an SPA.
Accessibility
- The input has no visible label inside the box: give it an
aria-label, or label the whole field with a<label for>outside. - Each remove button needs an
aria-labelthat names its tag ("Remove design"); aequitas.js does this for the chips it creates. - Removing a chip with its button removes the focused element; aequitas.js moves focus to the next chip's button, or to the input after the last chip.
| Key | Effect |
|---|---|
| Enter | Adds the typed text as a chip. |
| Backspace | In the empty input: removes the last chip. |