# Chip Group A collection of compact interactive chips for filtering or selecting options. Supports Filter (multi-select) and Choice (single-select) types, horizontal and wrapped layouts, and overflow handling for both desktop and mobile contexts. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-chip-group--introduction ## Variants documented in Storybook - Filter Chips Group: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-chip-group--filter-chips-group - Choice Chips Group: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-chip-group--choice-chips-group ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Chip Group. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Choice Chips Group — Choice Group (Desktop) HTML: ```html
``` React: ```jsx import React from 'react'; const ChipGroupExample1Demo = () => ( <> {/* Variant: Chip Group - Choice Group */}
); export default ChipGroupExample1Demo; ``` Angular: ```html
``` ### 2. Filter Chips Group — Default Filter Group HTML: ```html
``` React: ```jsx import React from 'react'; const ChipGroupExample2Demo = () => ( <> {/* Variant: Chip Group - Filter Group */}
); export default ChipGroupExample2Demo; ``` Angular: ```html
``` ### 3. Introduction — Introduction HTML: ```html
Components

Chip Group

A collection of compact interactive chips for filtering or selecting options. Supports Filter (multi-select) and Choice (single-select) types, horizontal and wrapped layouts, and overflow handling for both desktop and mobile contexts.

Implementation Showcase

Visual demonstration of various Chip Group patterns.

Filter Chip Group

Choice Chip Group

CSS Class Reference

Quickly copy layout and interaction classes for Chip Groups.

Structural Classes

Filter Chip Variant ux4g-filter-chip-group
Choice Chip Variant ux4g-choice-chip-group
Badge for Counts ux4g-badge-digit-primary

State Classes

Active/Selected State active
Disabled State disabled
``` React: ```jsx import React from 'react'; const ChipGroupExample3Demo = () => ( <>
Components

Chip Group

A collection of compact interactive chips for filtering or selecting options. Supports Filter (multi-select) and Choice (single-select) types, horizontal and wrapped layouts, and overflow handling for both desktop and mobile contexts.

Implementation Showcase

Visual demonstration of various Chip Group patterns.

Filter Chip Group

Choice Chip Group

CSS Class Reference

Quickly copy layout and interaction classes for Chip Groups.

{/* Structural Classes */}

Structural Classes

Filter Chip Variant ux4g-filter-chip-group
Choice Chip Variant ux4g-choice-chip-group
Badge for Counts ux4g-badge-digit-primary
{/* State Classes */}

State Classes

Active/Selected State active
Disabled State disabled
); export default ChipGroupExample3Demo; ``` Angular: ```html
Components

Chip Group

A collection of compact interactive chips for filtering or selecting options. Supports Filter (multi-select) and Choice (single-select) types, horizontal and wrapped layouts, and overflow handling for both desktop and mobile contexts.

Implementation Showcase

Visual demonstration of various Chip Group patterns.

Filter Chip Group

Choice Chip Group

CSS Class Reference

Quickly copy layout and interaction classes for Chip Groups.

Structural Classes

Filter Chip Variant ux4g-filter-chip-group
Choice Chip Variant ux4g-choice-chip-group
Badge for Counts ux4g-badge-digit-primary

State Classes

Active/Selected State active
Disabled State disabled
``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.