Radio group component

Introduction

RadioGroup is a Blade component that renders an accessible set of radio buttons with a consistent Publica.la style. It supports price & description columns, Livewire binding (via wire:model), and full keyboard navigation.

Props

Prop	Type	Default	Description
options	array	[]	Array that defines each radio option (see Option format below).
legend	string|null	null	Visually hidden <legend> for screen-reader context.

Option format

Each item inside options must contain these keys:

[
    'id'    => 'standard_shipping',  // string – unique HTML id
    'name'  => 'carrier',            // string – shared group name
    'value' => 'standard',           // string – submitted value
    'label' => 'Standard Shipping',  // string – main label
    // Optional
    'price'       => '$5.99',               // string
    'description' => 'Delivered in 3–5 business days',
]

Usage

Basic example

<x-form.radio-group
    :options="$options"                 {{-- see format above --}}
    wire:model="selectedCarrier"        {{-- Livewire binding --}}
    legend="Select shipping method"     {{-- screen-reader text --}}
/>

With prices & descriptions

<x-form.radio-group :options="$shippingOptions" wire:model="carrier" />

Accessibility

• Uses a native <fieldset> with role="radiogroup".
• Each option is wrapped in a <label> that contains one <input type="radio">.
• Keyboard users can navigate with arrow keys or Tab.
• Focus styles follow Tailwind accessibility guidelines.

Livewire integration

wire:model is forwarded automatically, so the component works exactly like a plain <input type="radio"> from Livewire's point of view.

Related files

• resources/views/components/form/radio-group.blade.php

---

Updated for Laravel 10, Livewire 2, Alpine 2, and Tailwind 3.