Tag Selector Card

Allow users to select multiple options in an intuitive and visually appealing way with this tag selector card.

This is a highly versatile component for any onboarding flow, preferences page, or filtering system. It presents options as clickable "tags" or "pills" that toggle their state on click, all powered by CSS.

Screenshot of a card that allows users to select from a list of tags.

Get Source Code Preview

About this Component

The core of this card's functionality is a clever use of native HTML checkboxes, which are visually hidden and replaced by styled label elements. This CSS-only approach provides a modern, interactive feel without the need for JavaScript, while remaining fully accessible to both keyboard and screen reader users.

Features

CSS-Only Interactivity: The toggle selection is handled entirely with the :checked pseudo-class in CSS. No JavaScript is required.
Fully Accessible: By using a semantic label for each hidden input type="checkbox", the component is keyboard-navigable and works perfectly with screen readers.
Flexible Layout: The container for the tags uses Flexbox with wrapping enabled, allowing the tags to flow naturally onto multiple lines.

Code Breakdown

HTML Structure

Each selectable tag is a div that contains an input with type="checkbox" and a corresponding label. The input is visually hidden via CSS but remains functional. The label is styled to look like a clickable "pill" or tag. The label's for attribute must match the input's id to create the link that allows clicking the label to check and uncheck the hidden input.

CSS Styling

The interactivity is powered by the adjacent sibling selector (+) and the :checked pseudo-class. The rule .tag-input:checked + .tag-item is the important part. It basically says "When a tag-input checkbox is checked, select the adjacent tag-item (our label) and apply these new styles to it". This allows us to change the background-color, color, and border-color of the label when its associated checkbox is selected. We also provide a visible focus style with the :focus-visible pseudo-class for keyboard users.

Code

Here's the complete, self-contained code. You can easily add more options by duplicating the tag structure in the HTML. To make a tag selected by default, just add the checked attribute to its input element.

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f3f4f6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* Optional: a container to center the card on the page for demonstration */
.demo-container-tags {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

/* === Tag Selector Card Styles === */
.tag-selector-card {
    --tag-card-radius: 12px;
    --tag-card-shadow: 0 4px 10px rgba(0,0,0,0.06);
    --tag-selected-bg: #4f46e5;
    --tag-selected-text: #ffffff;
    
    background-color: #ffffff;
    border-radius: var(--tag-card-radius);
    box-shadow: var(--tag-card-shadow);
    max-width: 500px;
    width: 100%;
    padding: 1.5rem;
}

.tag-selector-header {
    margin-bottom: 1.25rem;
}
.tag-selector-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}
.tag-selector-subtitle {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* This is the hidden checkbox input */
.tag-input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

/* The visible tag, which is a label for the checkbox */
.tag-item {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    background-color: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* The style for the selected state */
.tag-input:checked + .tag-item {
    background-color: var(--tag-selected-bg);
    color: var(--tag-selected-text);
    border-color: var(--tag-selected-bg);
}

.tag-input:focus-visible + .tag-item {
    outline: 2px solid var(--tag-selected-bg);
    outline-offset: 2px;
}

</style>

<div class="demo-container-tags">
    <div class="tag-selector-card">
        <header class="tag-selector-header">
            <h3 class="tag-selector-title">Select Your Interests</h3>
            <p class="tag-selector-subtitle">Choose a few topics to personalize your feed.</p>
        </header>
        <div class="tags-container">
            <div>
                <input type="checkbox" id="tag1" class="tag-input">
                <label for="tag1" class="tag-item">UI/UX Design</label>
            </div>
             <div>
                <input type="checkbox" id="tag2" class="tag-input" checked>
                <label for="tag2" class="tag-item">JavaScript</label>
            </div>
             <div>
                <input type="checkbox" id="tag3" class="tag-input">
                <label for="tag3" class="tag-item">Productivity</label>
            </div>
             <div>
                <input type="checkbox" id="tag4" class="tag-input">
                <label for="tag4" class="tag-item">Web Development</label>
            </div>
             <div>
                <input type="checkbox" id="tag5" class="tag-input" checked>
                <label for="tag5" class="tag-item">CSS</label>
            </div>
        </div>
    </div>
</div>

View Output