5 Pure CSS3 with JSPublished 2026-10-04Free · no sign-up
Eight tag and chip patterns: topic links, colour-coded labels, a tag input that turns text into chips, single-choice chips, people chips with avatars, filter chips with counts, outline tags with icons and a long list with a show-more toggle.
Article topic tags as a list of links, each a rounded pill with a hash prefix added in CSS. Tags that lead somewhere should be links, not buttons, and the list has a label so screen readers announce Topics before the tags.
Issue-tracker labels such as Bug, Feature and Docs, each with a coloured dot and a tinted background derived from one custom property using color-mix(). Every label also has distinct text, so colour is never the only difference.
A field where pressing Enter or a comma turns the typed text into a tag, and Backspace on an empty field removes the last tag. Tags are kept in a list with remove buttons, and a hidden input holds the comma-separated value for form submission.
Single-select chips for options like delivery time, built from radio buttons so only one can be chosen and the arrow keys move between them. The selected chip fills with colour and gains a tick through the :checked state.
Chips that represent people, with a small avatar, a name and an optional remove button, as used for assignees and mentions. The avatar initials are decorative because the full name follows, which keeps screen reader output tidy.
Category filter chips that show how many items each contains, like Mugs 24. The counts are part of each button's text so they are read aloud, and the selected chip uses aria-pressed with a filled style.
Minimal outline tags with small leading icons for attributes like Vegan, Gluten free and Spicy. The icons are decorative emoji hidden from screen readers, and the text alone carries the meaning, which also makes the tags translatable.
A long tag list that shows the first few tags and a +4 more button that reveals the rest. The button reports its state with aria-expanded and changes to Show less, so nothing is permanently hidden from any visitor.
const ob = document.querySelector('.ovf button');
ob.addEventListener('click', () => { const o = document.querySelector('.ovf').classList.toggle('open'); ob.setAttribute('aria-expanded', String(o)); ob.textContent = o ? 'Show less' : '+4 more'; });
About these CSS Tags and Chips
Link, button or plain text
Tags that lead to a page are links. Chips that filter or toggle are buttons with aria-pressed, or radios when only one can be chosen. Labels that only describe something are plain text.
Colour plus words
Colour-coded labels need distinct text. color-mix() derives a tint and border from one colour per label, keeping a family of labels consistent.
Tag inputs
Turn text into a tag on Enter or comma, remove the last tag with Backspace on an empty field, and give every remove button the tag's name, such as Remove CSS.
Long lists
Show the first few tags and a +4 more button with aria-expanded, rather than hiding tags permanently.
Frequently asked questions
Which demos need JavaScript?
The tag input, counted filters and the show-more toggle.
How do I submit tags with a form?
Keep a hidden input in sync with the tags, as the tag input demo does.
Chip or tag, what is the difference?
Mostly naming. Chips are usually interactive, tags usually descriptive.