Use chip selection when a short set of terse chips is the user's answer, filter chips when chips narrow a result set, checkbox group when independent choices need fuller labels, and segmented control when one compact local mode is active.
Use chip selection when a short set of terse chips is the user's answer, filter chips when chips narrow a result set, checkbox group when independent choices need fuller labels, and segmented control when one compact local mode is active.
Practice the judgment: Imagine this situation: Chip selection is used for a long checklist, causing chips to wrap into many rows and hide the rest of the form. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Chip selection | Filter chips | Checkbox group | Segmented control |
|---|---|---|---|---|
| UI or UX | UI + UX - Compact selectable chip group for short choice answers | UI + UX - Compact chip set for toggling or removing result filters | UI + UX - Multiple-choice form control | UI + UX - Compact mode selector |
| UI guidance | Render a labelled chip group with short chip labels, visible selected and unselected states, focus states, disabled states, optional selected checkmarks, and inline help or error text. | Render filter chips as a compact set of short, consistently styled controls near the content they filter, with clear selected, unselected, focused, disabled, and removable states. | Render visible native checkboxes with labels, checked states, group legend, select-all-that-apply hint, and group validation state. | Render a compact horizontal group with two to four adjacent segments, one selected state, visible focus, and stable sizing. |
| UX guidance | Use chip selection when users answer a lightweight choice question from a small visible set and the labels are short enough to scan as chips. | Help the person reach a clear task outcome. | Let users choose independent options and review the selected set before submitting. | Avoid using segments for unrelated pages, hidden content sections, destructive actions, or choices that need long explanation. |
| Good UI | An onboarding form asks Choose up to 3 interests and shows compact chips for Design, Data, Research, AI, Accessibility, and Mobile with selected checkmarks. | A search results page shows chips for Open, Urgent, Appeals, and Benefits below the search box, with selected chips using a checkmark and stronger background. | Visible checkboxes with large hit areas, persistent labels, group legend, and aligned helper text. | Two to four adjacent segments with a clear selected segment, visible focus ring, and readable labels that fit on one row. |
| Bad UI | A chip row contains selectable answers, removable tags, links, and action chips with identical styling. | A single pill labelled Filter sits alone and behaves like a vague button. | Tiny custom boxes that are hard to target. | Many cramped segments with truncated text. |
| Good UX | A user selects Design, Data, and Accessibility, sees 3 of 3 selected, then receives immediate feedback when trying to add a fourth chip. | A user tabs to Status: Open, presses Delete, and focus moves to the next applied chip while the result summary updates. | Clicking the label toggles the checkbox. | Selecting a segment changes a nearby local mode, filter, or view immediately. |
| Bad UX | A user taps a chip expecting to answer a question, but the page filters content instead. | Tapping a chip changes the page route and clears the result context. | Using checkboxes for mutually exclusive choices. | Using segments for unrelated destinations. |
| Best fit | Users answer a lightweight choice question from a small set of short labels. | A few common filters should stay visible and directly toggleable near the content. | Users can choose zero, one, or many options. | There are a few mutually exclusive modes. |
| Avoid when | The chips filter a result set rather than collect an answer. | There are many criteria, ranges, dates, or grouped fields that need a panel or form. | Only one option can be selected. | Options are full content sections needing tab semantics. |
| Required state | Empty chip group with visible question label and helper text. | Selected chip state with visible selected indicator and updated result count. | Unchecked option state. | Default selected segment. |
| Accessibility burden | Give the chip group a visible label and programmatic group name. | Use button semantics for interactive chips and expose selected state with aria-pressed or equivalent semantics. | Use programmatic labels for every checkbox. | Expose selected or pressed state and the group name. |
| Common misuse | Mixing selectable chips, removable tags, read-only badges, links, and action chips in one visual group. | Using a lone chip as a generic Filter button. | Using checkboxes for mutually exclusive choices. | Using segments for unrelated page navigation. |