Select one option from a set of mutually exclusive choices. Perfect for single-choice questions and settings.
Align descriptions for each radio directly below its label.
Group radio inputs inside a fieldset and provide more context with descriptions for each radio option.
A more compact alternative to standard radio buttons.
You can also use the size="sm" prop to make the radios smaller.
Combine segmented radio buttons with icon prefixes.
A bordered alternative to standard radio buttons.
You can swap between vertical and horizontal card layouts by conditionally applying flex-col based on the viewport.
You can arrange a set of radio cards vertically by simply adding the flex-col class to the group container.
You can arrange a set of radio cards vertically by simply adding the flex-col class to the group container.
For a cleaner look, you can remove the radio indicator using :indicator="false".
You can compose your own custom cards through the flux:radio component slot.
|
Prop
|
Description
|
|---|---|
| wire:model |
Binds the radio group selection to a Livewire property. See the wire:model documentation for more information.
|
| name |
Name attribute for the radio group. Automatically set when using wire:model.
|
| label |
Label text displayed above the radio group. When provided, wraps the radio group in a flux:field component with an adjacent flux:label component. See the field component.
|
| description |
Help text displayed below the radio group. When provided alongside label, appears between the label and radio group within the flux:field wrapper. See the field component.
|
| variant |
Visual style of the group. Options: default, segmented, cards.
|
| invalid |
Applies error styling to the radio group.
|
|
Slot
|
Description
|
|---|---|
| default |
The radio buttons to be grouped together.
|
|
Attribute
|
Description
|
|---|---|
| data-flux-radio-group |
Applied to the root element for styling and identification.
|
|
Prop
|
Description
|
|---|---|
| label |
Label text displayed above the radio button. When provided, wraps the radio button in a flux:field component with an adjacent flux:label component. See the field component.
|
| description |
Help text displayed below the radio button. When provided alongside label, appears between the label and radio button within the flux:field wrapper. See the field component.
|
| value |
Value associated with the radio button when used in a group.
|
| checked |
If true, the radio button is selected by default.
|
| disabled |
Prevents user interaction with the radio button.
|
| icon |
Name of the icon to display (for segmented variant).
|
|
Slot
|
Description
|
|---|---|
| default |
Custom content for card variant.
|
|
Attribute
|
Description
|
|---|---|
| data-flux-radio |
Applied to the root element for styling and identification.
|
| data-checked |
Applied when the radio button is selected.
|