Github

Radio Group

Radio groups let users choose exactly one option from a predefined set.

Component variations

Direction

Radio groups can be displayed vertically or horizontally.

With Description

Radio buttons can include descriptions for additional context.

Disabled

The entire group or individual items can be disabled.

Usage Guidelines

Import

Import the radio group component and item interface:

import-radio-group.ts

Copy code

Basic Implementation

Provide a list of items and track the selected value:

1. Define items in TypeScript

my.component.ts

Copy code

2. Render in template

my.component.html

Copy code

With Descriptions

Add descriptions to provide additional context for each option:

1. Define items with descriptions

my.component.ts

Copy code

2. Render in template

my.component.html

Copy code

Disabled State

Disable the entire group or individual items:

1. Disable the entire group

my.component.ts

Copy code

my.component.html

Copy code

2. Disable individual items

my.component.ts

Copy code

my.component.html

Copy code

Handling Output

Listen to the valueChange event to react when the selected value changes:

1. Define handler in TypeScript

my.component.ts

Copy code

2. Bind in template

my.component.html

Copy code

All Available APIs

Example using all available APIs:

radio-group-example.html

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
items
VdRadioGroupItem[]
[]
Yes
List of radio button items
direction
'vertical' | 'horizontal'
'vertical'
No
Layout direction for the radio group
value
string | number | null
null
No
Currently selected value
disabled
boolean
false
No
Disables the entire group
name
string
auto-generated
No
HTML name attribute shared by all radio buttons in the group

Outputs

Property
Type
Description
valueChange
EventEmitter<string | number>
Emits the selected value when a radio button is clicked

VdRadioGroupItem Interface

Each item in the items array follows this interface:

Property
Type
Required
Description
label
string
Yes
Display text for the radio button item
value
string | number
Yes
Unique value emitted on selection
description
string
No
Supporting text displayed below the label
disabled
boolean
No
Disables this specific radio button item

Best Practices

When to Use

  • Use Radio Group when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Radio Group when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Use radio groups when only one option can be selected from a list
  • Use checkboxes instead when multiple selections are allowed
  • Prefer vertical layout for more than 3 options to improve readability
  • Keep option labels short and descriptive
  • Use descriptions when options need additional context
  • Always provide a default selection when possible
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

Interact with the radio group in this section

example.html

Copy code