# Checkbox Checkbox present a list of options where users can make multiple selections, a single selection or none at all. They support user interaction by allowing the selection of independent items ensuring that users can easily customize settings, filter search results and submit multi choice forms with clarity. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-checkbox--introduction ## 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 Checkbox. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Checkbox Group — Checkbox Group HTML: ```html

Email notifications

SMS notifications

Push notifications

Email notifications, Push notifications ``` React: ```jsx import React from 'react'; const CheckboxExample1Demo = () => ( <> {/* Group Item: Email notifications */}

Email notifications

{/* Group Item: SMS notifications */}

SMS notifications

{/* Group Item: Push notifications */}

Push notifications

{/* defaultSelected Summary Target */} Email notifications, Push notifications ); export default CheckboxExample1Demo; ``` Angular: ```html

Email notifications

SMS notifications

Push notifications

Email notifications, Push notifications ``` ### 2. Checked States — Checked States HTML: ```html

Not selected

Selected

Partially selected

``` React: ```jsx import React from 'react'; const CheckboxExample2Demo = () => ( <> {/* State: Unchecked */}

Not selected

{/* State: defaultChecked */}

Selected

{/* State: Indeterminate (data-ux4g-indeterminate sets indeterminate on init) */}

Partially selected

); export default CheckboxExample2Demo; ``` Angular: ```html

Not selected

Selected

Partially selected

``` ### 3. Description Variants — Description Variants (Propagation) HTML: ```html

Label

Default description

Label

Error text

Label

Warning text

Label

Success text

``` React: ```jsx import React from 'react'; const CheckboxExample3Demo = () => ( <> {/* Description: Info */}

Label

info default description

{/* Description: Error */}

Label

error Error text

{/* Description: Warning */}

Label

warning Warning text

{/* Description: Success */}

Label

check_circle Success text

); export default CheckboxExample3Demo; ``` Angular: ```html

Label

Default description

Label

Error text

Label

Warning text

Label

Success text

``` ### 4. Introduction — Introduction HTML: ```html

Components

Checkbox

Checkbox present a list of options where users can make multiple selections, a single selection or none at all. They support user interaction by allowing the selection of independent items ensuring that users can easily customize settings, filter search results and submit multi choice forms with clarity.

Visual Showcase

A compact tour of the checkbox patterns used across the source-backed stories.

CSS Class Reference

Quickly copy the checkbox classes used by the showcased source-backed variants.

Checkbox Classes

Purpose	Class
Base	`ux4g-checkbox`
Input	`ux4g-checkbox-input`
Control	`ux4g-checkbox-control`
Mark	`ux4g-checkmark`
Content	`ux4g-checkbox-content`
Header	`ux4g-checkbox-header`
Label	`ux4g-checkbox-label`
Description	`ux4g-checkbox-description`
Required	`ux4g-checkbox-required`
Icon	`ux4g-checkbox-icon`
Helper	`ux4g-checkbox-desc-helper`
Error	`ux4g-checkbox-desc-error`
Warning	`ux4g-checkbox-desc-warning`
Success	`ux4g-checkbox-desc-success`
State	`ux4g-checkbox-error`

``` React: ```jsx import React from 'react'; const CheckboxExample4Demo = () => ( <>

Components

Checkbox

Visual Showcase

A compact tour of the checkbox patterns used across the source-backed stories.

States

Unchecked

Checked

Error

Label Variants

Label * token

info Description

Label only

Descriptions and Indeterminate

Helper

info default description

Option A

Select All

Option B

CSS Class Reference

Quickly copy the checkbox classes used by the showcased source-backed variants.

Checkbox Classes

Purpose	Class
Base	`ux4g-checkbox`
Input	`ux4g-checkbox-input`
Control	`ux4g-checkbox-control`
Mark	`ux4g-checkmark`
Content	`ux4g-checkbox-content`
Header	`ux4g-checkbox-header`
Label	`ux4g-checkbox-label`
Description	`ux4g-checkbox-description`
Required	`ux4g-checkbox-required`
Icon	`ux4g-checkbox-icon`
Helper	`ux4g-checkbox-desc-helper`
Error	`ux4g-checkbox-desc-error`
Warning	`ux4g-checkbox-desc-warning`
Success	`ux4g-checkbox-desc-success`
State	`ux4g-checkbox-error`

); export default CheckboxExample4Demo; ``` Angular: ```html

Components

Checkbox

Visual Showcase

A compact tour of the checkbox patterns used across the source-backed stories.

CSS Class Reference

Quickly copy the checkbox classes used by the showcased source-backed variants.

Checkbox Classes

Purpose	Class
Base	`ux4g-checkbox`
Input	`ux4g-checkbox-input`
Control	`ux4g-checkbox-control`
Mark	`ux4g-checkmark`
Content	`ux4g-checkbox-content`
Header	`ux4g-checkbox-header`
Label	`ux4g-checkbox-label`
Description	`ux4g-checkbox-description`
Required	`ux4g-checkbox-required`
Icon	`ux4g-checkbox-icon`
Helper	`ux4g-checkbox-desc-helper`
Error	`ux4g-checkbox-desc-error`
Warning	`ux4g-checkbox-desc-warning`
Success	`ux4g-checkbox-desc-success`
State	`ux4g-checkbox-error`

``` ### 5. Label Variants — Label Variants HTML: ```html

Label *

Description

Label *

Label

``` React: ```jsx import React from 'react'; const CheckboxExample5Demo = () => ( <> {/* Variant: Full */}

Label * token

info Description

{/* Variant: Label + required */}

Label *

{/* Variant: Label Only */}

Label

{/* Variant: Control Only */}

); export default CheckboxExample5Demo; ``` Angular: ```html

Label *

Description

Label *

Label

``` ### 6. Parent Child Indeterminate — Indeterminate (Parent-Child) HTML: ```html

Select All

Option A

Option B

Option C

``` React: ```jsx import React from 'react'; const CheckboxExample6Demo = () => ( <> {/* Wrap the group in data-ux4g-parent-child. Mark the select-all input with data-ux4g-select-all. Mark each child input with data-ux4g-child. */} {/* Parent Checkbox */}

Select All

{/* Child Option: Option A */}

Option A

{/* Child Option: Option B */}

Option B

{/* Child Option: Option C */}

Option C

); export default CheckboxExample6Demo; ``` Angular: ```html

Select All

Option A

Option B

Option C

``` ### 7. Sizes — Sizes HTML: ```html

Label *

Description

Label *

Description

Label *

Description

``` React: ```jsx import React from 'react'; const CheckboxExample7Demo = () => ( <> {/* Size: Large */}

Label * token

info Description

{/* Size: Medium */}

Label * token

info Description

{/* Size: Small */}

Label * token

info Description

); export default CheckboxExample7Demo; ``` Angular: ```html

Label *

Description

Label *

Description

Label *

Description

``` ### 8. States Matrix — States Matrix HTML: ```html

``` React: ```jsx import React from 'react'; const CheckboxExample8Demo = () => ( <> {/* default (Unchecked) */}

{/* default (Checked) */}

{/* default (Indeterminate: data-ux4g-indeterminate sets indeterminate on init) */}

{/* disabled (Unchecked) */}

{/* disabled (Checked) */}

{/* disabled (Indeterminate: data-ux4g-indeterminate sets indeterminate on init) */}

); export default CheckboxExample8Demo; ``` Angular: ```html

``` ## 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.