Skip to content

Laravel Radio Group Component

Free · MIT

Groups related radios in a fieldset so the question itself is announced, not just the options.

A Radio Group built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are contrast-tested against WCAG 2.1 AA/UI in CI, in both themes — see what's covered. Drop it in with a single Blade tag: <x-aura::radio-group>

Installation

composer require bluestarsystem/aura-ui

Usage

<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>

See the full API, props and live examples in the Radio Group documentation.

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.

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.

See more examples and every variant in the Radio Group documentation.

Laravel-native
No JavaScript framework. Pure Blade, Livewire & Alpine.
Dark mode & themeable
Tailwind 4 CSS variables and a visual Theme Studio.
Accessible
Colour contrast tested against WCAG 2.1 AA/UI in CI; ARIA attributes on select components.