Select one option from a set of mutually exclusive choices. Perfect for single-choice questions and settings.
<flux:radio.group wire:model="payment" label="Select your payment method"> <flux:radio value="cc" label="Credit Card" checked /> <flux:radio value="paypal" label="Paypal" /> <flux:radio value="ach" label="Bank transfer" /></flux:radio.group>Align descriptions for each radio directly below its label.
<flux:radio.group label="Role"> <flux:radio name="role" value="administrator" label="Administrator" description="Administrator users can perform any action." checked /> <flux:radio name="role" value="editor" label="Editor" description="Editor users have the ability to read, create, and update." /> <flux:radio name="role" value="viewer" label="Viewer" description="Viewer users only have the ability to read. Create, and update are restricted." /></flux:radio.group>Group radio inputs inside a fieldset and provide more context with descriptions for each radio option.
<flux:fieldset> <flux:legend>Role</flux:legend> <flux:radio.group> <flux:radio value="administrator" label="Administrator" description="Administrator users can perform any action." checked /> <flux:radio value="editor" label="Editor" description="Editor users have the ability to read, create, and update." /> <flux:radio value="viewer" label="Viewer" description="Viewer users only have the ability to read. Create, and update are restricted." /> </flux:radio.group></flux:fieldset>A more compact alternative to standard radio buttons.
<flux:radio.group wire:model="role" label="Role" variant="segmented"> <flux:radio label="Admin" /> <flux:radio label="Editor" /> <flux:radio label="Viewer" /></flux:radio.group>You can also use the size="sm" prop to make the radios smaller.
<flux:radio.group wire:model="role" label="Role" variant="segmented" size="sm"> <flux:radio label="Admin" /> <flux:radio label="Editor" /> <flux:radio label="Viewer" /></flux:radio.group>Combine segmented radio buttons with icon prefixes.
<flux:radio.group wire:model="role" variant="segmented"> <flux:radio label="Admin" icon="wrench" /> <flux:radio label="Editor" icon="pencil-square" /> <flux:radio label="Viewer" icon="eye" /></flux:radio.group>A bordered alternative to standard radio buttons.
<flux:radio.group wire:model="shipping" label="Shipping" variant="cards" class="max-sm:flex-col"> <flux:radio value="standard" label="Standard" description="4-10 business days" checked /> <flux:radio value="fast" label="Fast" description="2-5 business days" /> <flux:radio value="next-day" label="Next day" description="1 business day" /></flux:radio.group>You can swap between vertical and horizontal card layouts by conditionally applying flex-col based on the viewport.
<flux:radio.group ... class="max-sm:flex-col"> <!-- ... --></flux:radio.group>You can arrange a set of radio cards vertically by simply adding the flex-col class to the group container.
<flux:radio.group label="Shipping" variant="cards" class="flex-col"> <flux:radio value="standard" label="Standard" description="4-10 business days" /> <flux:radio value="fast" label="Fast" description="2-5 business days" /> <flux:radio value="next-day" label="Next day" description="1 business day" /></flux:radio.group>You can arrange a set of radio cards vertically by simply adding the flex-col class to the group container.
<flux:radio.group label="Shipping" variant="cards" class="max-sm:flex-col"> <flux:radio value="standard" icon="truck" label="Standard" description="4-10 business days" /> <flux:radio value="fast" icon="cube" label="Fast" description="2-5 business days" /> <flux:radio value="next-day" icon="clock" label="Next day" description="1 business day" /></flux:radio.group>For a cleaner look, you can remove the radio indicator using :indicator="false".
<flux:radio.group label="Shipping" variant="cards" :indicator="false" class="max-sm:flex-col"> <flux:radio value="standard" icon="truck" label="Standard" description="4-10 business days" /> <flux:radio value="fast" icon="cube" label="Fast" description="2-5 business days" /> <flux:radio value="next-day" icon="clock" label="Next day" description="1 business day" /></flux:radio.group>You can compose your own custom cards through the flux:radio component slot.
<flux:radio.group label="Shipping" variant="cards" class="max-sm:flex-col"> <flux:radio value="standard" checked> <flux:radio.indicator /> <div class="flex-1"> <flux:heading class="leading-4">Standard</flux:heading> <flux:subheading size="sm">4-10 business days</flux:subheading> </div> </flux:radio> <flux:radio value="fast"> <flux:radio.indicator /> <div class="flex-1"> <flux:heading class="leading-4">Fast</flux:heading> <flux:subheading size="sm">2-5 business days</flux:subheading> </div> </flux:radio> <flux:radio value="next-day"> <flux:radio.indicator /> <div class="flex-1"> <flux:heading class="leading-4">Next day</flux:heading> <flux:subheading size="sm">1 business day</flux:subheading> </div> </flux:radio></flux:radio.group>