# Radio Radio Button presents a list of mutually exclusive options where users can make exactly one selection from the group. It supports user interaction by allowing the selection of a single choice out of multiple predefined items, ensuring that users can easily define precise preferences, answer single choice binary questions, and submit forms with distinct clarity. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-radio--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 Radio. 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 RadioExample1Demo = () => ( <> {/* Variant: Radio Description - Helper */}

Label

info Helper text

{/* Variant: Radio Description - Error */}

Label

error Error text

{/* Warning */}

Label

warning Warning text

{/* Success */}

Label

check_circle Success text

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

Label

Helper text

Label

Error text

Label

Warning text

Label

Success text

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

Components

Radio

Radio Button presents a list of mutually exclusive options where users can make exactly one selection from the group. It supports user interaction by allowing the selection of a single choice out of multiple predefined items, ensuring that users can easily define precise preferences, answer single choice binary questions, and submit forms with distinct clarity.

Key Behaviors

Supports exclusive selection within a related set of options.
Pairs the control with labels, required markers, trailing icons, and descriptive guidance.
Handles hover, active, focused, disabled, and error states without changing the component anatomy.
Scales from standalone radios to descriptive groups used in preference and settings flows.

Available Stories

States Matrix

Default, hover, active, focused, disabled, and error permutations across unchecked and checked radios.

Radio Group

Three related options with descriptions and a synced selected-value readout.

Sizes and Labels

Large, medium, and small controls plus label-density variants from full metadata to control-only.

Descriptions

Helper, error, warning, and success message treatments using radio-specific description classes.

Visual Showcase

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

CSS Class Reference

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

Radio Classes

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

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

Components

Radio

Key Behaviors

Supports exclusive selection within a related set of options.
Pairs the control with labels, required markers, trailing icons, and descriptive guidance.
Handles hover, active, focused, disabled, and error states without changing the component anatomy.
Scales from standalone radios to descriptive groups used in preference and settings flows.

Available Stories

States Matrix

Default, hover, active, focused, disabled, and error permutations across unchecked and defaultChecked radios.

Radio Group

Three related options with descriptions and a synced selected-value readout.

Sizes and Labels

Large, medium, and small controls plus label-density variants from full metadata to control-only.

Descriptions

Helper, error, warning, and success message treatments using radio-specific description classes.

Visual Showcase

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

States

Default

Hover checked

Error

Label Variants

Label * token

info Description

Label only

Descriptions and Group Usage

Helper

info Helper text

Success

check_circle Success text

Option One

info First option description

Option Three

info Third option description

CSS Class Reference

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

Radio Classes

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

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

Components

Radio

Key Behaviors

Supports exclusive selection within a related set of options.
Pairs the control with labels, required markers, trailing icons, and descriptive guidance.
Handles hover, active, focused, disabled, and error states without changing the component anatomy.
Scales from standalone radios to descriptive groups used in preference and settings flows.

Available Stories

States Matrix

Default, hover, active, focused, disabled, and error permutations across unchecked and checked radios.

Radio Group

Three related options with descriptions and a synced selected-value readout.

Sizes and Labels

Large, medium, and small controls plus label-density variants from full metadata to control-only.

Descriptions

Helper, error, warning, and success message treatments using radio-specific description classes.

Visual Showcase

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

CSS Class Reference

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

Radio Classes

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

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

Label *

Description

Label *

Label

``` React: ```jsx import React from 'react'; const RadioExample3Demo = () => ( <> {/* Variant: Radio Label - Full (label + icon + description) */}

Label * token

info Description

{/* Variant: Radio Label - Label + required */}

Label *

{/* Variant: Radio Label - Label only */}

Label

{/* Variant: Radio Label - Control only */}

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

Label *

Description

Label *

Label

``` ### 4. Radio Group — Radio Group HTML: ```html

Option One

First option description

Option Two

Second option description

Option Three

Third option description

``` React: ```jsx import React from 'react'; const RadioExample4Demo = () => ( <> {/* Variant: Radio Group - Option One */}

Option One

info First option description

{/* Variant: Radio Group - Option Two */}

Option Two

info Second option description

{/* Variant: Radio Group - Option Three */}

Option Three

info Third option description

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

Option One

First option description

Option Two

Second option description

Option Three

Third option description

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

Label *

Description

Label *

Description

Label *

Description

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

Label * token

info Description

{/* Variant: Radio Size - Medium */}

Label * token

info Description

{/* Variant: Radio Size - Small */}

Label * token

info Description

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

Label *

Description

Label *

Description

Label *

Description

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

Unchecked

Checked

Unchecked

Checked

Unchecked

Checked

Unchecked

Checked

Unchecked

Checked

Unchecked

Checked

``` React: ```jsx import React from 'react'; const RadioExample6Demo = () => ( <> {/* Variant: Radio State - default (Unchecked) */}

Unchecked

{/* Variant: Radio State - default (Checked) */}

Checked

{/* Variant: Radio State - Hover (Unchecked) */}

Unchecked

{/* Variant: Radio State - Hover (Checked) */}

Checked

{/* Variant: Radio State - Active (Unchecked) */}

Unchecked

{/* Variant: Radio State - Active (Checked) */}

Checked

{/* Variant: Radio State - Focused (Unchecked) */}

Unchecked

{/* Variant: Radio State - Focused (Checked) */}

Checked

{/* Variant: Radio State - disabled (Unchecked) */}

Unchecked

{/* Variant: Radio State - disabled (Checked) */}

Checked

{/* Variant: Radio State - Error (Unchecked) */}

Unchecked

{/* Variant: Radio State - Error (Checked) */}

Checked

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

Unchecked

Checked

Unchecked

Checked

Unchecked

Checked

Unchecked

Checked

Unchecked

Checked

Unchecked

Checked

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