Chip selection

Problem Context

• The answer set is small and each option can be represented by a short word or phrase.
• The product wants a compact, touch-friendly alternative to conventional checkboxes or radio buttons.
• The choice is part of a form, onboarding flow, preference setup, chat decision, or lightweight configuration task.
• The UI must distinguish selected answer chips from filter chips, badges, removable tags, and action chips.

Selection Rules

• Choose chip selection when the chip set itself is the user's answer to a short choice question.
• Use single-selection chips only when exactly one chip in the group can be selected at a time, and state that rule before interaction.
• Use multiple-selection chips when several short options can be selected and the maximum count is small enough to remain readable.
• Use filter chips when selection changes result inclusion rather than storing a form or preference answer.
• Use checkbox group when options need longer labels, descriptions, conventional form affordance, or many visible independent choices.
• Use segmented control when exactly one compact option changes a nearby view, mode, sort, or presentation immediately.
• Use multi-select when the option set is long, searchable, async, grouped, or better managed in a popup with selected-value chips.
• Use badges or read-only tags when the label is informational and cannot be selected.
• Avoid chip selection for more than a small set of short labels; switch to list picker, checkbox group, radio group, or multi-select when wrapping exceeds a few rows.

Required States

• Empty chip group with visible question label and helper text.
• Unselected chip state with visible focus and hit target.
• Selected chip state with checkmark, pressed state, or equivalent selected indicator.
• Single-selection chip group state where selecting one chip deselects the previous chip.
• Multiple-selection chip group state with selected count and maximum count feedback.
• Blocked maximum-selection state when another chip cannot be added.
• Required validation state with no selected chips.
• Disabled unavailable chip state with explanation when needed.
• Overflow, wrapping, or horizontal-scroll state for compact chip rows.

Interaction Contract

• Selecting a chip changes only that chip group's answer and does not navigate, run an action, remove the option, or filter unrelated content.
• For single-selection chip groups, selecting one chip clears the previous selection.
• For multiple-selection chip groups, selecting a chip toggles that chip while preserving other selected chips and chip order.
• The group enforces minimum, maximum, required, and disabled rules immediately with inline feedback.
• Selected state is visible and programmatic, not conveyed by color alone.
• Chip labels stay concise and stable; long labels are not allowed to wrap in a way that changes chip shape unpredictably.

Implementation Checklist

• Define whether the chip group is single-select or multi-select before implementation.
• Label the chip group with a visible question and helper text that explains required or maximum selection rules.
• Expose each selectable chip as a button, checkbox-like control, radio-like control, or equivalent with selected or pressed state.
• Use checkmarks, borders, text, icons, or pressed state in addition to color for selected chips.
• Keep chip order stable after selection and avoid moving selected chips to the front.
• Block extra selections immediately when a maximum count is reached and announce the reason.
• Do not place links, delete icons, menus, actions, and selection toggles inside the same chip unless the component pattern explicitly supports that role.
• Test keyboard toggling, focus order, screen reader state, touch target spacing, high zoom, forced colors, wrapping, long labels, localization, required validation, and max-count validation.

Common Generated-UI Mistakes

• Using chip selection to filter result sets without explaining that the chips are filters.
• Mixing selectable chips, removable tags, read-only badges, links, and action chips in one visual group.
• Using chips for long labels that should be checkbox or radio options.
• Letting selected chips reorder or disappear after selection.
• Relying only on color to show selected state.
• Using a close icon on a selectable chip and making users wonder whether it toggles selection or removes the option.
• Allowing more chips to be selected than the submitted value accepts.

Critique Questions

• Is the chip group collecting an answer, filtering content, triggering actions, or merely labelling information?
• Are labels short enough that chips remain compact after localization?
• Can users tell whether the group is single-select or multi-select before they tap?
• What happens when the user selects none, too many, a disabled chip, or a long localized label?
• Does the selected state remain clear without color and in screen reader output?
• Should this become checkbox group, radio group, segmented control, or multi-select because the option set is growing?