Chip selection vs Filter chips vs Checkbox group vs Segmented control

Prefer chip selection when users are answering a compact choice question with short labels such as interests, sizes, cuisines, quick preferences, or lightweight categories.

Chip selection live example Filter chips live example Checkbox group live example Segmented control live example

Decision dimensions

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.	Use filter chips for quick, low-cost filtering when users can understand the available criteria at a glance and combine a few chips without opening a larger panel.	Let users choose independent options and review the selected set before submitting.	Help users switch a local mode, view, filter, sort, or presentation immediately without navigation or form submission.
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 taps Urgent and Appeals, sees the result count drop immediately, then removes Appeals without losing the search query or sort order.	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.	Unselected chip set state with no active filters and a clear 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	Using chip selection to filter result sets without explaining that the chips are filters.	Using a lone chip as a generic Filter button.	Using checkboxes for mutually exclusive choices.	Using segments for unrelated page navigation.

Chip selection

UI or UX: UI + UX - Compact selectable chip group for short choice answers
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.
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.
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.
Bad UI: A chip row contains selectable answers, removable tags, links, and action chips with identical styling.
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.
Bad UX: A user taps a chip expecting to answer a question, but the page filters content instead.
Best fit: Users answer a lightweight choice question from a small set of short labels.
Avoid when: The chips filter a result set rather than collect an answer.
Required state: Empty chip group with visible question label and helper text.
Accessibility burden: Give the chip group a visible label and programmatic group name.
Common misuse: Using chip selection to filter result sets without explaining that the chips are filters.

Filter chips

UI or UX: UI + UX - Compact chip set for toggling or removing result filters
UI guidance: 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.
UX guidance: Use filter chips for quick, low-cost filtering when users can understand the available criteria at a glance and combine a few chips without opening a larger panel.
Good UI: 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.
Bad UI: A single pill labelled Filter sits alone and behaves like a vague button.
Good UX: A user taps Urgent and Appeals, sees the result count drop immediately, then removes Appeals without losing the search query or sort order.
Bad UX: Tapping a chip changes the page route and clears the result context.
Best fit: A few common filters should stay visible and directly toggleable near the content.
Avoid when: There are many criteria, ranges, dates, or grouped fields that need a panel or form.
Required state: Unselected chip set state with no active filters and a clear result count.
Accessibility burden: Use button semantics for interactive chips and expose selected state with aria-pressed or equivalent semantics.
Common misuse: Using a lone chip as a generic Filter button.

Checkbox group

UI or UX: UI + UX - Multiple-choice form control
UI guidance: Render visible native checkboxes with labels, checked states, group legend, select-all-that-apply hint, and group validation state.
UX guidance: Let users choose independent options and review the selected set before submitting.
Good UI: Visible checkboxes with large hit areas, persistent labels, group legend, and aligned helper text.
Bad UI: Tiny custom boxes that are hard to target.
Good UX: Clicking the label toggles the checkbox.
Bad UX: Using checkboxes for mutually exclusive choices.
Best fit: Users can choose zero, one, or many options.
Avoid when: Only one option can be selected.
Required state: Unchecked option state.
Accessibility burden: Use programmatic labels for every checkbox.
Common misuse: Using checkboxes for mutually exclusive choices.

Segmented control

UI or UX: UI + UX - Compact mode selector
UI guidance: Render a compact horizontal group with two to four adjacent segments, one selected state, visible focus, and stable sizing.
UX guidance: Help users switch a local mode, view, filter, sort, or presentation immediately without navigation or form submission.
Good UI: Two to four adjacent segments with a clear selected segment, visible focus ring, and readable labels that fit on one row.
Bad UI: Many cramped segments with truncated text.
Good UX: Selecting a segment changes a nearby local mode, filter, or view immediately.
Bad UX: Using segments for unrelated destinations.
Best fit: There are a few mutually exclusive modes.
Avoid when: Options are full content sections needing tab semantics.
Required state: Default selected segment.
Accessibility burden: Expose selected or pressed state and the group name.
Common misuse: Using segments for unrelated page navigation.

Decision rules

Prefer chip selection when users are answering a compact choice question with short labels such as interests, sizes, cuisines, quick preferences, or lightweight categories.
Prefer filter chips when selecting a chip changes which results are included or excluded; chip selection records a value in a form or task instead of filtering the surrounding content.
Prefer checkbox group when options need full sentences, helper text, accessible grouping as a conventional form question, or a longer vertical layout.
Prefer segmented control when exactly one option changes a nearby view, mode, sort, or presentation immediately; chip selection should not be used as page navigation or a view switcher.
Use chip selection over multi-select only when the option set is short and visible; if users need search, async loading, grouping, or many values, use multi-select.
Use radio group when exactly one selection is required and each option needs description, validation history, or conventional form behavior.
Keep chip order stable after selection; do not move selected chips to the front because the chips are the available answer set, not an applied-filter summary.
Show selected state with text, checkmark, pressed state, border, or icon in addition to color, and reserve remove icons for input chips or selected-value chips.
Set a maximum count before interaction and block or explain extra selections immediately; do not wait until submit to reveal that too many chips were chosen.
Do not mix selectable chips with decorative tags, badges, links, and action chips in the same group unless each role is visually and programmatically distinct.

Inspect live examples

Chip selection Filter chips Checkbox group Segmented control

Failure modes

Chip selection is used for a long checklist, causing chips to wrap into many rows and hide the rest of the form.
A chip group filters nearby results but is stored as a form answer, so users cannot predict whether they are filtering or choosing.
Selected chips rely only on subtle background color and have no pressed or checked state for assistive technology.
A chip labelled Other opens a text field while other chips behave as selections, but the difference is not announced or validated.
A required chip group validates only at final submit and does not preserve the selected chips.
A selected chip contains a close icon that removes the option from the available set instead of toggling selected state.

Sources

SAP Fiori for Android Chips
SAP documents chips for form-cell selection, short labels, single and multiple selection, selected checkmarks, wrapping or horizontal scrolling, error messages, and option-count limits.
Carbon Design System Tag Component
Carbon documents selectable tags as selected or deselected choices, keyboard operation with Tab, Enter, and Space, concise tag titles, grouping limits, and differentiation from read-only, dismissible, and operational tags.
Material Design Chips
Material documents chips for entering information, making selections, filtering content, or triggering actions, and distinguishes choice chips, filter chips, input chips, and action chips.
Wise Design Chip
Wise distinguishes choice chips from filter chips and documents chip rows with short text, stable order, compact placement, and limits on overly long chip sets.

Verification

Last verified: 2026-06-09