;\n\nexport const Filters: Story = {\n render: args => ,\n};\n\nexport const RemovableValues: Story = {\n args: { label: 'Phone numbers' },\n render: args => ,\n};\n\nexport const Scrolling: Story = {\n args: { label: 'Categories', scroll: true },\n render: args => (\n \n \n {['Email', 'Phone', 'Address', 'Employment', 'Relatives', 'Vehicles'].map(category => (\n {}}>\n {category}\n \n ))}\n \n
\n ),\n};\n\nexport const DarkTheme: Story = {\n globals: { theme: 'dark' },\n render: args => ,\n};\n"
},
"specification": {
"$schema": "../../../specs/component-spec.schema.json",
"identity": {
"name": "ChipGroup",
"status": "preview",
"version": "1.0.0",
"summary": "A labelled set of chips, announced as one group rather than as loose controls."
},
"parts": [
{
"id": "root",
"label": "Root",
"description": "Group container that owns the accessible name and the row layout.",
"required": true
},
{
"id": "chips",
"label": "Chips",
"description": "One kind of Chip: all selectable, or all removable.",
"required": true
}
],
"allowedDesignChoices": {
"variants": {
"wrap": {
"label": "Wrap",
"description": "Chips flow onto more lines as the set grows."
},
"scroll": {
"label": "Scroll",
"description": "Chips stay on one line and the row scrolls horizontally."
}
},
"sizes": {},
"tones": {}
},
"variants": [
{
"id": "wrap",
"label": "Wrap",
"description": "Default. Chips wrap onto more lines.",
"platforms": [
"ios",
"android",
"web"
]
},
{
"id": "scroll",
"label": "Scroll",
"description": "One line with a hidden scrollbar, for a long known set.",
"platforms": [
"ios",
"android",
"web"
]
}
],
"sizes": [],
"measurements": [
{
"id": "chip-gap",
"label": "Chip gap",
"kind": "exact",
"token": "--cds-space-8",
"value": 8,
"unit": "px",
"appliesTo": [
"root"
]
}
],
"layout": {
"alignment": "Chips share a center line and read in source order.",
"flow": "A wrapping row by default, or one scrolling line when `scroll` is set.",
"notes": [
"Keep one kind of chip in a group. Mixing selectable and removable chips gives two different affordances the same shape.",
"Use Tag for a marker that does nothing, and keep it outside the group.",
"Use SegmentedControl instead for a fixed set of 5 or fewer mutually exclusive view modes."
]
},
"typographyAndColor": {
"typography": [
{
"label": "Inherited",
"description": "ChipGroup sets no type; its chips own their text. Ramp noted for parity.",
"token": "--cds-type-body-small-size"
}
],
"colors": [
{
"label": "Transparent",
"description": "ChipGroup paints no background; the surface behind shows through.",
"token": "--cds-bg-page"
}
]
},
"states": [
{
"id": "wrap",
"label": "Wrap",
"description": "Chips flow onto more lines."
},
{
"id": "scroll",
"label": "Scroll",
"description": "Chips stay on one line and scroll."
}
],
"behavior": [
{
"label": "Selection lives with the caller",
"description": "The group does not own selected state. Each Chip receives its own `selected` and `onPress`, so single and multiple selection both work without a second component."
},
{
"label": "One kind per group",
"description": "Do not mix selectable and removable chips in one group, and do not make only some of them interactive."
}
],
"accessibility": [
{
"label": "Group name",
"description": "`label` is required and becomes the group's accessible name, so the set is announced before its chips."
},
{
"label": "Focus stops",
"description": "Each chip keeps its own focus stop. The group adds no tab stop of its own."
}
],
"contentAdaptation": [
{
"label": "Growing sets",
"description": "Prefer wrapping when the count comes from data. Reach for `scroll` only when the set is known and short."
}
],
"motionHaptics": {
"motion": [
{
"label": "No group motion",
"description": "Adding or removing a chip reflows the row without an entrance animation."
}
],
"haptics": [
{
"label": "Owned by the chip",
"description": "The group requests no haptics. Each Chip fires `selection` on press."
}
]
},
"platformDifferences": []
},
"specification_source": "packages/design-system/src/components/controls/ChipGroup/ChipGroup.spec.json",
"guidance": {
"summary": "A labelled set of chips, announced as one group rather than as loose controls.",
"guidance": [
{
"heading": "Overview",
"body": "A labelled set of chips. Without a group, a row of chips reads to assistive technology as loose\ncontrols with no relationship, and every call site ends up re-inventing the row layout."
},
{
"heading": "Keep one kind per group",
"body": "Chips carry their affordance in their shape, so a group holding both a selectable chip and a\nremovable one gives two different behaviors the same appearance.\n\nA marker that does nothing is a `Tag`. Keep it outside the group."
},
{
"heading": "Selection stays with the caller",
"body": "The group holds no selected state. Each `Chip` takes its own `selected` and `onPress`, so single\nselection and multiple selection both work without a second component."
},
{
"heading": "Wrap or scroll",
"body": "Wrapping is the default, and it is the right choice when the count comes from data. Reach for\n`scroll` only when the set is known and short.\n\nFor a fixed set of five or fewer mutually exclusive view modes, use `SegmentedControl` instead. The\nboundary is the shape of the set: a segmented control is fixed, connected, and equal-width, while a\nchip group grows and wraps."
}
],
"usage": [],
"examples": [
{
"kind": "do",
"caption": "Fill a group with selectable chips, or fill it with removable chips."
},
{
"kind": "dont",
"caption": "Mix the two, or make only some of the chips interactive."
}
],
"source": "packages/design-system/src/components/controls/ChipGroup/ChipGroup.mdx",
"status": "local-preview",
"note": "Guidance is read from local documentation, originally imported from the frozen source. Platform assertions in guidance are not parity verification."
},
"links": {
"human": "/component-chipgroup",
"json": "/data/visual/components/chipgroup.json",
"storybook": "/storybook/?path=/story/cloaked-design-system-controls-chipgroup--filters"
}
}