Radio Component

The Radio component provides styled radio buttons for selecting a single option from multiple choices.

Basic Usage

Create a group of radio buttons with the same name:

<div class="space-y-2">
    <x-radio name="plan" value="free" label="Free Plan" />
    <x-radio name="plan" value="pro" label="Pro Plan" :checked="true" />
    <x-radio name="plan" value="enterprise" label="Enterprise Plan" />
</div>

With Description

Add descriptive text to provide more context:

<div class="space-y-4">
    <x-radio 
        name="size" 
        value="small" 
        label="Small" 
        description="Perfect for personal projects" />
    <x-radio 
        name="size" 
        value="medium" 
        label="Medium" 
        description="Great for small teams"
        :checked="true" />
    <x-radio 
        name="size" 
        value="large" 
        label="Large" 
        description="Built for large organizations" />
</div>

Container Style

Use the container style for a more prominent appearance:

<div class="flex flex-col gap-2 max-w-xs">
    <x-radio name="theme" value="light" label="Light Mode" :withContainer="true" />
    <x-radio name="theme" value="dark" label="Dark Mode" :withContainer="true" :checked="true" />
    <x-radio name="theme" value="auto" label="Auto" :withContainer="true" />
</div>

Disabled State

Disable radio buttons when needed:

<div class="space-y-2">
    <x-radio name="payment" value="card" label="Credit Card" />
    <x-radio name="payment" value="paypal" label="PayPal" :disabled="true" />
</div>

Livewire Integration

Use with Livewire for reactive forms:

<div class="space-y-2">
    <x-radio name="billing" value="monthly" label="Monthly" wire:model.live="billingPeriod" />
    <x-radio name="billing" value="yearly" label="Yearly" wire:model.live="billingPeriod" />
</div>

In your Livewire component:

class SubscriptionForm extends Component
{
    public string $billingPeriod = 'monthly';

    public function updatedBillingPeriod()
    {
        // React to changes
    }
}

Props Reference

Prop	Type	Default	Description
id	string|null	Auto-generated	Unique ID for the radio button. Auto-generates if not provided.
name	string	-	Required. Radio group name. All radios in a group must share the same name.
value	string	-	Required. Value submitted when this radio is selected.
label	string|null	null	Label text displayed next to the radio button.
description	string|null	null	Additional descriptive text displayed below the label.
labelPosition	string	right	Label position relative to the radio. Options: left, right
checked	bool	false	Whether the radio button is initially selected.
disabled	bool	false	Whether the radio button is disabled.
withContainer	bool	false	When true, displays the radio in a bordered container for emphasis.
wire:model	string	-	Livewire property binding. Use wire:model.live for real-time updates.

References

Category	Path / Name	Description
Component	resources/views/components/radio.blade.php	Radio component file

For the detailed documentation, please visit the Penguin UI Radio Buttons.