# Radio Group

Source: https://lumeo.nativ.sh/components/radio-group

# Radio Group

A set of mutually exclusive radio buttons for single-option selection.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<RadioGroup />

## When to Use

-   Single selection from a small set of visible options (typically 2-5 choices)
-   Settings and preferences where users need to see all options at once
-   Plan or tier selection cards in pricing pages
-   Notification or display preference toggles within forms

Preview Code

Default

Default

Comfortable

Compact

Selected: default

Preview Code

Pricing Plan

Free $0/mo Pro $15/mo Team $49/mo

Selected plan: pro

Preview Code

With Form Field

Notification preference

All notifications

Mentions only

None

Choose how you want to be notified.

## API Reference

### RadioGroup

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

The radio group content (RadioGroupItem or RadioGroupCard elements).

Value

string?

null

Currently selected value. Use with @bind-Value.

ValueChanged

EventCallback<string>

\-

Callback invoked when the selected value changes.

AriaLabel

string?

null

Accessible label for the radio group.

AriaLabelledBy

string?

null

ID of the element that labels the radio group.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

Required

bool

false

Marks the field as required for form validation.

Invalid

bool

false

Applies error styling to indicate a validation error.

ErrorText

string?

null

Error message shown below when Invalid is true (standalone).

HelperText

string?

null

Help text shown below when there is no error (standalone).

Label

string?

null

Inline label rendered above the group (standalone).

Name

string?

null

HTML name attribute for form identification.

FormField

FormFieldContext?

null

Cascaded context from a parent FormField; drives validation state automatically.

### RadioGroupItem

Prop

Type

Default

Description

Value

string

""

The value this radio item represents. Required.

Disabled

bool

false

Disables the radio item.

Description

string?

null

Secondary text shown below the item label.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

### RadioGroupCard

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

The card content.

Value

string

""

The value this card represents. Required.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

## Related Components

-   [Select](/components/select) — Dropdown selection when the option list is long or space is limited
-   [Checkbox](/components/checkbox) — Multi-select when users can choose more than one option
-   [ToggleGroup](/components/toggle-group) — Compact button-style single selection for toolbar-like UIs