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.
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.