form

Radio Group

A set of checkable buttons where only one can be checked at a time.

Preview

A preview of the Radio Group component with interactive controls.

Preview Code

Default

Comfortable

Compact

Interactive

Installation

Add the Radio Group component to your project.

Bash

ng g @ng-cn/core:c radio-group

Usage

Import and use the Radio Group component in your Angular application.

Template TypeScript

template.html

<RadioGroup [(value)]="value" class="space-y-3">
  <div class="flex items-center space-x-2">
    <RadioGroupItem value="default" id="r1" />
    <Label htmlFor="r1">Default</Label>
  </div>
  <div class="flex items-center space-x-2">
    <RadioGroupItem value="comfortable" id="r2" />
    <Label htmlFor="r2">Comfortable</Label>
  </div>
  <div class="flex items-center space-x-2">
    <RadioGroupItem value="compact" id="r3" />
    <Label htmlFor="r3">Compact</Label>
  </div>
</RadioGroup>

Examples

Explore different variations and use cases for the Radio Group component.

Basic

Preview Code

Interactive

API Reference

Props

Prop	Type	Default	Description
`value`	`string`	—	The controlled value of the radio group.
`defaultValue`	`string`	—	The value of the radio item that should be checked by default.
`class`	`string`	—	Additional CSS classes to apply.