php artisan aura:add radio-groupCopies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.
composer require bluestarsystem/aura-ui
php artisan aura:installFull installation instructions in the Installation guide.
Overview
A set of radios is not just a list of inputs — it is one question with several answers. <x-aura::radio-group> renders a <fieldset> with the label as its <legend>, which is what makes a screen reader announce "Plan, radio group, Alpha, 1 of 3" instead of reading three unrelated options.
Wrapping radios in a plain <div> with a heading above them looks identical and conveys none of that.
Basic Usage
<x-aura::radio-group label="Plan">
<x-aura::radio name="plan" value="single" label="Single project" checked />
<x-aura::radio name="plan" value="unlimited" label="Unlimited" />
<x-aura::radio name="plan" value="team" label="Team" />
</x-aura::radio-group><x-aura::radio-group label="Plan">
<x-aura::radio name="plan" value="single" label="Single project" />
<x-aura::radio name="plan" value="unlimited" label="Unlimited" />
</x-aura::radio-group>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label |
string|null |
null |
Rendered as the <legend>. Omit it only when a visible heading is already associated another way. |
name |
string|null |
null |
Convenience for documenting the group; each Radio still needs its own name. |
With Livewire
<x-aura::radio-group label="Plan">
@foreach ($plans as $plan)
<x-aura::radio wire:model.live="plan" name="plan" :value="$plan->slug" :label="$plan->name" />
@endforeach
</x-aura::radio-group>
Accessibility
Give every radio in the group the same name. That is what makes them mutually exclusive and what lets arrow keys move between them — with different names they become independent controls that all happen to look alike.