# Chips Chips are compact UI elements that represent discrete information, such as tags, categories, selections, or input. They help users quickly filter, select, or manage items in an interface. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-chips--introduction ## Variants documented in Storybook - FilterChips: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-chips--filterchips - ChoiceChips: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-chips--choicechips - InputChips: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-chips--inputchips ## 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 Chips. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Choice Chips — Medium Size HTML: ```html ``` React: ```jsx import React from 'react'; const ChipsExample1Demo = () => ( <> {/* Variant: Choice Chip - Medium - default */} {/* Variant: Choice Chip - Medium - Active */} {/* Variant: Choice Chip - Medium - disabled */} ); export default ChipsExample1Demo; ``` Angular: ```html ``` ### 2. Choice Chips — Small Size HTML: ```html ``` React: ```jsx import React from 'react'; const ChipsExample2Demo = () => ( <> {/* Variant: Choice Chip - Small - default */} {/* Variant: Choice Chip - Small - Active */} {/* Variant: Choice Chip - Small - disabled */} ); export default ChipsExample2Demo; ``` Angular: ```html ``` ### 3. Filter Chips — Medium Size HTML: ```html ``` React: ```jsx import React from 'react'; const ChipsExample3Demo = () => ( <> {/* Variant: Filter Chip - Medium - default */} {/* Variant: Filter Chip - Medium - Active */} {/* Variant: Filter Chip - Medium - disabled */} ); export default ChipsExample3Demo; ``` Angular: ```html ``` ### 4. Filter Chips — Small Size HTML: ```html ``` React: ```jsx import React from 'react'; const ChipsExample4Demo = () => ( <> {/* Variant: Filter Chip - Small - default */} {/* Variant: Filter Chip - Small - Active */} {/* Variant: Filter Chip - Small - disabled */} ); export default ChipsExample4Demo; ``` Angular: ```html ``` ### 5. Input Chips — Medium Size HTML: ```html ``` React: ```jsx import React from 'react'; const ChipsExample5Demo = () => ( <> {/* Variant: Input Chip - Medium - default */} {/* Variant: Input Chip - Medium - disabled */} ); export default ChipsExample5Demo; ``` Angular: ```html ``` ### 6. Input Chips — Small Size HTML: ```html ``` React: ```jsx import React from 'react'; const ChipsExample6Demo = () => ( <> {/* Variant: Input Chip - Small - default */} {/* Variant: Input Chip - Small - disabled */} ); export default ChipsExample6Demo; ``` Angular: ```html ``` ### 7. Input Chips — Extra Small Size HTML: ```html ``` React: ```jsx import React from 'react'; const ChipsExample7Demo = () => ( <> {/* Variant: Input Chip - Extra Small - default */} {/* Variant: Input Chip - Extra Small - disabled */} ); export default ChipsExample7Demo; ``` Angular: ```html ``` ### 8. Introduction — Introduction HTML: ```html
Components

Chips

Chips are compact UI elements that represent discrete information, such as tags, categories, selections, or input. They help users quickly filter, select, or manage items in an interface.

Implementation Showcase

Visual demonstration of various chip types, sizes, and states.

Filter Chips

Choice Chips

Input Chips

CSS Class Reference

Quickly copy sizing and variant utility classes for Chips.

Filter Chip Classes

Filter Chip Medium ux4g-filter-chip-md
Filter Chip Small ux4g-filter-chip-sm

Choice Chip Classes

Choice Chip Medium ux4g-choice-chip-md
Choice Chip Small ux4g-choice-chip-sm

Input Chip Classes

Input Chip Medium ux4g-input-chip-md
Input Chip Small ux4g-input-chip-sm
Input Chip Extra Small ux4g-input-chip-xs

Common States

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

Chips

Chips are compact UI elements that represent discrete information, such as tags, categories, selections, or input. They help users quickly filter, select, or manage items in an interface.

Implementation Showcase

Visual demonstration of various chip types, sizes, and states.

{/* Filter Chips Showcase */}

Filter Chips

{/* Choice Chips Showcase */}

Choice Chips

{/* Input Chips Showcase */}

Input Chips

CSS Class Reference

Quickly copy sizing and variant utility classes for Chips.

{/* Filter Chip Classes */}

Filter Chip Classes

Filter Chip Medium ux4g-filter-chip-md
Filter Chip Small ux4g-filter-chip-sm
{/* Choice Chip Classes */}

Choice Chip Classes

Choice Chip Medium ux4g-choice-chip-md
Choice Chip Small ux4g-choice-chip-sm
{/* Input Chip Classes */}

Input Chip Classes

Input Chip Medium ux4g-input-chip-md
Input Chip Small ux4g-input-chip-sm
Input Chip Extra Small ux4g-input-chip-xs
{/* State Classes */}

Common States

Active State active
Disabled State (Attribute) disabled
); export default ChipsExample8Demo; ``` Angular: ```html
Components

Chips

Chips are compact UI elements that represent discrete information, such as tags, categories, selections, or input. They help users quickly filter, select, or manage items in an interface.

Implementation Showcase

Visual demonstration of various chip types, sizes, and states.

Filter Chips

Choice Chips

Input Chips

CSS Class Reference

Quickly copy sizing and variant utility classes for Chips.

Filter Chip Classes

Filter Chip Medium ux4g-filter-chip-md
Filter Chip Small ux4g-filter-chip-sm

Choice Chip Classes

Choice Chip Medium ux4g-choice-chip-md
Choice Chip Small ux4g-choice-chip-sm

Input Chip Classes

Input Chip Medium ux4g-input-chip-md
Input Chip Small ux4g-input-chip-sm
Input Chip Extra Small ux4g-input-chip-xs

Common States

Active State active
Disabled State (Attribute) 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.