# Switch Toggle component allows users to switch between two states typically representing on/off, enabled/disabled, or active/inactive settings. Toggles provide a quick and intuitive way to modify system or feature preferences with a single action. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-switch--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 Switch. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Description Variants — Description Variants HTML: ```html

Label

Helper text

Label

Error text

Label

Warning text

Label

Success text

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

Label

info Helper text

{/* Description: Error */}

Label

error Error text

{/* Description: Warning */}

Label

warning Warning text

{/* Description: Success */}

Label

check_circle Success text

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

Label

Helper text

Label

Error text

Label

Warning text

Label

Success text

``` ### 2. Introduction — Introduction HTML: ```html ``` React: ```jsx import React from 'react'; const SwitchExample2Demo = () => ( <> ); export default SwitchExample2Demo; ``` Angular: ```html ``` ### 3. Label Variants — Label Variants HTML: ```html

Label *

Description

Label *

Label

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

Label * token

info Description

{/* Variant: Label + required */}

Label *

{/* Variant: Label Only */}

Label

{/* Variant: Control Only */}

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

Label *

Description

Label *

Label

``` ### 4. List Interaction Patterns — List Interaction Patterns HTML: ```html

``` React: ```jsx import React from 'react'; const SwitchExample4Demo = () => ( <> {/* Pattern: default (whole list item toggles switch) */}

{/* Pattern: Only switch toggles (list item not clickable) */}

Label list switch
Label list switch
Label list switch
Label list switch

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

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

Switch Large

Switch Medium

Switch Small

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

Switch Large

{/* Size: Medium */}

Switch Medium

{/* Size: Small */}

Switch Small

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

Switch Large

Switch Medium

Switch Small

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

Off

``` React: ```jsx import React from 'react'; const SwitchExample6Demo = () => ( <> {/* Default: Off */}

Off

{/* Default: On */}

{/* Hover: Off */}

Off

{/* Hover: On */}

{/* Active: Off */}

Off

{/* Active: On */}

{/* Focused: Off */}

Off

{/* Focused: On */}

{/* Disabled: Off */}

Off

{/* Disabled: On */}

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

Off

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

Switch

State Showcase

Sizes

Label Variants

Description Variants

List Interaction Patterns

CSS Class Reference

Structure

Variants

Switch

State Showcase

Sizes

Label Variants

Description Variants

List Interaction Patterns

CSS Class Reference

Structure

Variants

Switch

State Showcase

Sizes

Label Variants

Description Variants

List Interaction Patterns

CSS Class Reference

Structure

Variants