Radio Group Component

The RadioGroup component helps organize related radio buttons into logical groups. It provides semantic structure, accessibility features, and flexible styling options.

Key Features

Semantic Structure: Uses proper fieldset/legend elements
Accessibility: Built with ARIA support and keyboard navigation
Flexible Styling: Customizable appearance for group and title
Nested Content: Works with radio buttons and custom content

Basic Usage

Create a simple radio group with a title:

Select your plan

Apple

Banana

Cherry

1
<RadioGroup title="Select your plan" titleProps={{ class: 'text-lg mb-2' }}>
2
    <Checkbox type="radio" name="plan" value="basic">Apple</Checkbox>
3
    <Checkbox type="radio" name="plan" value="pro">Banana</Checkbox>
4
    <Checkbox type="radio" name="plan" value="enterprise">Cherry</Checkbox>
5
</RadioGroup>

Variants

Basic Group

Choose your theme

Light

Dark

System

1
<RadioGroup title="Choose your theme">
2
    <Checkbox type="radio" name="theme" value="light">Light</Checkbox>
3
    <Checkbox type="radio" name="theme" value="dark">Dark</Checkbox>
4
    <Checkbox type="radio" name="theme" value="system">System</Checkbox>
5
</RadioGroup>

Styled Group

Select Layout

Compact

Comfortable

Spacious

1
<RadioGroup
2
    title="Select Layout"
3
    titleProps={{ class: 'font-bold text-xl text-primary' }}
4
    class="rounded-card p-4 pt-0 border"
5
>
6
    <Checkbox type="radio" name="layout" value="compact">Compact</Checkbox>
7
    <Checkbox type="radio" name="layout" value="comfortable">Comfortable</Checkbox>
8
    <Checkbox type="radio" name="layout" value="spacious">Spacious</Checkbox>
9
</RadioGroup>

Props API

RadioGroup Component Props Extends <fieldset> HTMLElement
Prop	Type	Default	Description
title	string		Group title text
titleProps	HTMLAttributes<legend>		Props for the title element

Limited Time Launch Sale

Create intuitive form experiences with our pre-built RadioGroup component. Get the AstroJS starter template now!

GET 60% OFF!

QR Code Rating

Directory