Radio Group

Basic Usage

Preview

Notifications

How do you prefer to receive notifications?

Email

Phone (SMS)

Push notification

Code

---
import RadioGroup from '@uicg/cli/components/RadioGroup/radio-group.astro'
import RadioItem from '@uicg/cli/components/RadioGroup/radio-item.astro'
---

<RadioGroup name="notifications" legend="Notifications" description="How do you prefer to receive notifications?">
  <RadioItem name="notifications" value="email" checked label="Email" />
  <RadioItem name="notifications" value="sms" label="Phone (SMS)" />
  <RadioItem name="notifications" value="push" label="Push notification" />
</RadioGroup>

Sizes

Preview

Small Radio Group

Compact option

Another option

Medium Radio Group

Standard option

Another option

Large Radio Group

Prominent option

Another option

Code

<RadioGroup name="small-demo" size="small" legend="Small Radio Group">
  <RadioItem name="small-demo" size="small" value="option1" checked label="Compact option" />
  <RadioItem name="small-demo" size="small" value="option2" label="Another option" />
</RadioGroup>

<RadioGroup name="medium-demo" size="medium" legend="Medium Radio Group">
  <RadioItem name="medium-demo" size="medium" value="option1" checked label="Standard option" />
  <RadioItem name="medium-demo" size="medium" value="option2" label="Another option" />
</RadioGroup>

<RadioGroup name="large-demo" size="large" legend="Large Radio Group">
  <RadioItem name="large-demo" size="large" value="option1" checked label="Prominent option" />
  <RadioItem name="large-demo" size="large" value="option2" label="Another option" />
</RadioGroup>

Orientation

Vertical Layout

First option

Second option

Third option

Horizontal Layout

First

Second

Third

States

Required Selection *

You must choose one option to continue

Required option 1

Required option 2

Disabled Radio Group

This entire group cannot be interacted with

Disabled checked

Disabled unchecked

Mixed States

Available option

You can select this

Disabled option

This option is not available

Another available option

Also selectable

Form Integration

Account Settings

Configure your account preferences

Account Type

Choose your account level

Personal Account

For individual use

Business Account

For teams and organizations

Enterprise Account

Advanced features and support

Billing Frequency

Monthly

$29/month - Pay as you go

Yearly

$290/year - Save 20%

Data Privacy

Choose your privacy settings carefully

Data Sharing Level

Minimal Sharing

Only essential data is shared

Standard Sharing

Anonymized analytics and usage data

Full Sharing

All data for personalization

Properties

RadioGroup

Property	Type	Default	Description
name	string	-	Required. Name attribute for all radio inputs in the group
value	string	-	Currently selected value
disabled	boolean	false	Whether the entire radio group is disabled
required	boolean	false	Whether a selection is required
size	'small' | 'medium' | 'large'	'medium'	Size variant affecting all radio items
legend	string	-	Legend text for the radio group
description	string	-	Description text below the legend
orientation	'vertical' | 'horizontal'	'vertical'	Layout direction of radio items
class	string	-	Additional CSS classes to apply

RadioItem

Property	Type	Default	Description
value	string	-	Required. Value for this radio option
checked	boolean	false	Whether this radio is selected
disabled	boolean	false	Whether this specific radio is disabled
required	boolean	false	Whether this radio is required (inherited from group)
label	string	-	Label text for the radio option
description	string	-	Description text below the label
name	string	-	Name attribute (should match RadioGroup)
id	string	auto-generated	Unique identifier for the radio
class	string	-	Additional CSS classes to apply

Accessibility

The RadioGroup component follows WCAG 2.1 AA guidelines:

Screen Reader Support

• Semantic HTML: Uses <fieldset> and <legend> for proper grouping
• Radio Group Role: ARIA radiogroup role for assistive technology
• Label Association: Proper for attribute linking labels to inputs
• Description Support: Uses aria-describedby for additional context
• State Announcement: Screen readers announce selection changes

Keyboard Navigation

• Arrow Keys: Navigate between radio options (Up/Down, Left/Right)
• Tab Navigation: Focus enters and exits the radio group
• Space/Enter: Select the focused radio option
• Focus Management: Only one radio in the group is focusable at a time

Visual Accessibility

• High Contrast: Meets WCAG contrast requirements in all variants
• Focus Indicators: Clear visual focus rings for keyboard users
• Touch Targets: Minimum 44x44px touch target size (large variant)
• Color Independence: Selection state indicated by visual dot, not just color

Group Management

• Single Selection: Enforces only one selection per group
• Required Groups: Proper validation and error communication
• Disabled States: Individual items or entire groups can be disabled

Examples

Plan Selection

Choose Your Plan

Select the subscription that works best for you

Starter

$9/month - Perfect for individuals

Professional

$29/month - Best for small teams

Enterprise

$99/month - Advanced features

Payment Method

Payment Method

Credit Card

PayPal

Bank Transfer

Survey Question

How satisfied are you with our service? *

Very Satisfied

Satisfied

Neutral

Dissatisfied

Very Dissatisfied

Confirmation Dialog

Are you sure you want to delete this item? *

Yes, delete it

This action cannot be undone

No, keep it

Cancel the deletion

<!-- Basic Usage -->
<RadioGroup name="options" legend="Choose an option">
  <RadioItem value="option1" label="First Option" />
  <RadioItem value="option2" label="Second Option" />
</RadioGroup>

<!-- With Descriptions -->
<RadioGroup name="plan" legend="Select Plan" description="Choose your subscription">
  <RadioItem
    value="basic"
    label="Basic Plan"
    description="$9/month - For individuals"
  />
  <RadioItem
    value="pro"
    checked
    label="Pro Plan"
    description="$29/month - For teams"
  />
</RadioGroup>

<!-- Different Intent and Size -->
<RadioGroup
  name="theme"
  intent="primary"
  size="large"
  legend="Theme Preference"
  orientation="horizontal"
>
  <RadioItem value="light" label="Light" />
  <RadioItem value="dark" checked label="Dark" />
  <RadioItem value="auto" label="Auto" />
</RadioGroup>

<!-- Required with Validation -->
<RadioGroup
  name="terms"
  intent="danger"
  required
  legend="Terms Agreement"
>
  <RadioItem
    value="accept"
    label="I accept the terms"
    description="Required to continue"
  />
  <RadioItem
    value="decline"
    label="I decline the terms"
  />
</RadioGroup>