Interest Selector — Free HTML CSS JS Snippet

An interest selector is a multi-select chip grid — related to the chip filter and tag input — used in onboarding flows, newsletter preference centres, and content personalisation screens to learn what a user cares about. This snippet provides 16 topic chips in a flex-wrap grid, a minimum selection validation (3 required), a live count display, a disabled Continue button that enables on reaching the minimum, and a "Select at least 3" hint that hides once the minimum is met.

The pill chip toggle pattern

Each .chip is a button element styled as a rounded pill. toggle(chip) adds or removes the .selected class, which switches the border from grey (#e2e8f0) to indigo (#6366f1) and applies a light indigo background tint. Using button elements (not divs or inputs) gives keyboard focus, Enter/Space activation, and correct ARIA semantics for free.

Minimum selection validation

update() counts .chip.selected elements and compares against MIN = 3. If below minimum, the Continue button is disabled via disabled attribute (which CSS styles as grey with not-allowed cursor). The "Select at least 3" note appears below the count text. Once the minimum is met, both the button enables and the note hides. This pattern is cleaner than showing a validation error on submit — it gives real-time visual guidance.

The live count display

#countText shows "0 selected", "1 selected", "3 selected" etc. A zero state shows "None selected". This gives immediate feedback on each chip click, making the requirement clear and progress visible — particularly important on mobile where users may not see the minimum count hint.

Emoji icons in chip buttons

The emoji inside each chip uses a span with font-size: 16px. Emoji render as colored icons across all platforms without any icon library. The chip layout is flex with a 6px gap between the emoji and the label text, keeping them tightly coupled as a single visual unit.

Collecting the selected values

To read which topics are selected, query all .chip.selected elements and extract their data-id attributes: const selected = [...document.querySelectorAll(".chip.selected")].map(el => el.dataset.id). This gives an array like ["design", "react", "devtools"]. On Continue, POST this array to your API: fetch("/api/onboarding/interests", { method: "POST", body: JSON.stringify({ interests: selected }), headers: { "Content-Type": "application/json" } }). On the server, store the array in the user's profile and use it to seed the personalised content feed.

Search and filtering for large topic lists

When the topic list grows beyond 20–30 chips, add a search box above the grid. On each keystroke, filter visible chips by checking if the chip's label text includes the search query (case-insensitive): chips.forEach(chip => { chip.style.display = chip.querySelector(".chip-label").textContent.toLowerCase().includes(q) ? "" : "none"; }). This keeps the underlying selection state intact while narrowing the visible choices. For very large lists (100+ topics), consider grouping chips into collapsible category sections with a "Show more" toggle per group.