Radio Group
A set of mutually exclusive radio buttons for single-option selection.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
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
Selected: default
Selected plan: pro
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 — Dropdown selection when the option list is long or space is limited
- Checkbox — Multi-select when users can choose more than one option
- ToggleGroup — Compact button-style single selection for toolbar-like UIs