Radio

Shipping method

Courier

Same-day delivery

Priority post

2 to 4 business days

In-store pickup

<flux:radio.group label="Shipping method">
    <flux:radio value="express" label="Courier" description="Same-day delivery" checked />
    <flux:radio value="post" label="Priority post" description="2 to 4 business days" />
    <flux:radio value="pickup" label="In-store pickup" />
</flux:radio.group>

Segmented

For a small set of mutually exclusive views.

View

List

Grid

Table

<flux:radio.group label="View" variant="segmented">
    <flux:radio label="List" checked />
    <flux:radio label="Grid" />
    <flux:radio label="Table" />
</flux:radio.group>

Cards

Payment

Pay online

Card or wallet

Cash on delivery

Tehran only

<flux:radio.group label="Payment" variant="cards">
    <flux:radio value="online" label="Pay online" description="Card or wallet" checked />
    <flux:radio value="cod" label="Cash on delivery" description="Tehran only" />
</flux:radio.group>

Pills and buttons

Pills

Any price

Under 1M

Over 1M

Buttons

Newest

Cheapest

<div class="space-y-6">
    <flux:radio.group label="Pills" variant="pills">
        <flux:radio label="Any price" checked />
        <flux:radio label="Under 1M" />
        <flux:radio label="Over 1M" />
    </flux:radio.group>

    <flux:radio.group label="Buttons" variant="buttons">
        <flux:radio label="Newest" checked />
        <flux:radio label="Cheapest" />
    </flux:radio.group>
</div>

Reference

flux:radio.group

Prop	Description
label	Group label.
description	Group description.
variant	Options: `default`, `segmented`, `cards`, `buttons`, `pills`.
wire:model	Binds the group to a Livewire property.

flux:radio

Prop	Description
label	Label beside the control.
description	Smaller text under the label.
value	Submitted value.
checked	Checked state for a plain form.
disabled	Disables the input.