Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Radio Group
A set of mutually exclusive options where only one can be selected at a time, with generic type support for type-safe binding and full keyboard navigation.
Default
A basic
RadioGroup with multiple RadioGroupItem options. Use @bind-Value for two-way binding to track the currently selected option. Use the Label parameter on each item for automatic label rendering and accessibility wiring.
Loading example…
Horizontal
Apply a horizontal layout by setting
Class="flex flex-row gap-4" on the RadioGroup. This overrides the default vertical grid layout and arranges items in a row, which works well for short option lists.
Loading example…
With Description
Radio options with descriptive text using native
<label> elements. Clicking anywhere inside the bordered card selects the option. The has-[:checked]:border-primary class highlights the active selection for clear visual feedback.
Loading example…
Disabled
Set
Disabled to true on the RadioGroup to prevent interaction with all items. Disabled items have reduced opacity, cannot be selected or focused, and the group sets aria-disabled for screen readers.
Loading example…