Components

Radio

Select one option from a set of mutually exclusive choices. Perfect for single-choice questions and settings.

Select your payment method
Credit Card
Paypal
Bank transfer
Copy to clipboard

With descriptions

Align descriptions for each radio directly below its label.

Role
Administrator Administrator users can perform any action.
Editor Editor users have the ability to read, create, and update.
Viewer Viewer users only have the ability to read. Create, and update are restricted.
Copy to clipboard

Within fieldset

Group radio inputs inside a fieldset and provide more context with descriptions for each radio option.

Role
Administrator Administrator users can perform any action.
Editor Editor users have the ability to read, create, and update.
Viewer Viewer users only have the ability to read. Create, and update are restricted.
Copy to clipboard

Segmented

A more compact alternative to standard radio buttons.

Role Admin Editor Viewer
Copy to clipboard

You can also use the size="sm" prop to make the radios smaller.

Role Admin Editor Viewer
Copy to clipboard

Segmented with icons

Combine segmented radio buttons with icon prefixes.

Role Admin Editor Viewer
Copy to clipboard

Radio cards

A bordered alternative to standard radio buttons.

This variant is only available in the Pro version of Flux.
Shipping
Standard
4-10 business days
Fast
2-5 business days
Next day
1 business day
Copy to clipboard

You can swap between vertical and horizontal card layouts by conditionally applying flex-col based on the viewport.

Copy to clipboard

Vertical cards

You can arrange a set of radio cards vertically by simply adding the flex-col class to the group container.

This variant is only available in the Pro version of Flux.
Shipping
Standard
4-10 business days
Fast
2-5 business days
Next day
1 business day
Copy to clipboard

Cards with icons

You can arrange a set of radio cards vertically by simply adding the flex-col class to the group container.

This variant is only available in the Pro version of Flux.
Shipping
Standard
4-10 business days
Fast
2-5 business days
Next day
1 business day
Copy to clipboard

Cards without indicators

For a cleaner look, you can remove the radio indicator using :indicator="false".

This variant is only available in the Pro version of Flux.
Shipping
Standard
4-10 business days
Fast
2-5 business days
Next day
1 business day
Copy to clipboard

Custom card content

You can compose your own custom cards through the flux:radio component slot.

This variant is only available in the Pro version of Flux.
Shipping
Standard
4-10 business days
Fast
2-5 business days
Next day
1 business day
Copy to clipboard

Reference

flux:radio.group

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.

flux:radio

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.

flux:radio.indicator

Used for custom radio button layouts in card variant.

Copyright © 2025 Wireable LLC ·Terms of Service
Built with by
Caleb Porzio and Hugo Sainte-Marie