Skip to content

Overview

The <x-aura::radio> component renders a styled radio button input with optional label and description text. Radio buttons are used when the user must select exactly one option from a set. Use the companion <x-aura::radio-group> component to semantically group related radio buttons under a common legend.

Basic Usage

<x-aura::radio name="color" value="red" label="Red" />
<x-aura::radio name="color" value="blue" label="Blue" />
<x-aura::radio name="color" value="green" label="Green" />

Props

Radio

Prop Type Default Description
label string|null null Text label displayed next to the radio button.
description string|null null Additional descriptive text shown below the label.
value string|null null The value submitted when this radio button is selected.
name string|null null The input name attribute, shared across the radio group.
disabled bool false Disables the radio button, preventing interaction.

Radio Group

Prop Type Default Description
label string|null null Legend text for the fieldset grouping.
name string|null null Optional name attribute for the fieldset.

Slots

Radio Group

Slot Description
Default ($slot) Contains the individual <x-aura::radio> components.

Variants / Examples

Radio Group with Legend

Select a plan 
<x-aura::radio-group label="Select a plan">
    <x-aura::radio name="plan" value="free" label="Free" description="Basic features, up to 3 projects" />
    <x-aura::radio name="plan" value="pro" label="Pro" description="Advanced features, unlimited projects" />
    <x-aura::radio name="plan" value="enterprise" label="Enterprise" description="Custom solutions and dedicated support" />
</x-aura::radio-group>

With Livewire Binding

<x-aura::radio-group label="Notification Preference">
    <x-aura::radio name="notifications" value="all" label="All notifications" wire:model="notificationPref" />
    <x-aura::radio name="notifications" value="important" label="Important only" wire:model="notificationPref" />
    <x-aura::radio name="notifications" value="none" label="None" wire:model="notificationPref" />
</x-aura::radio-group>

Disabled State

<x-aura::radio name="tier" value="basic" label="Basic" />
<x-aura::radio name="tier" value="premium" label="Premium" :disabled="true" />
<x-aura::radio name="tier" value="ultimate" label="Ultimate" :disabled="true" />

Pre-Selected Option

Payment Method 
<x-aura::radio-group label="Payment Method">
    <x-aura::radio name="payment" value="card" label="Credit Card" checked />
    <x-aura::radio name="payment" value="paypal" label="PayPal" />
    <x-aura::radio name="payment" value="bank" label="Bank Transfer" />
</x-aura::radio-group>

Standalone without Group

<div class="space-y-2">
    <x-aura::radio name="agree" value="yes" label="I agree to the terms" />
</div>

Accessibility

  • Each radio button is wrapped in a <label> element, so clicking the label text toggles the input.
  • The <x-aura::radio-group> component uses a <fieldset> with a <legend> element for proper semantic grouping.
  • Disabled radio buttons include aria-disabled="true" on the wrapping label for assistive technologies.
  • All additional attributes are forwarded to the underlying <input> element, allowing custom aria-* attributes.