Logo Beartropy

Radios

The x-radio component lets you present single-choice options in your UI.
Fully customizable: colors, sizes, labels, hints, error states, and dark mode.
All accessibility best practices included. Use standalone or within <x-radio-group>.

You can customize this component

Radio Variations

The radio supports these props:
  • label: Show a label next to the radio
  • disabled: Makes the radio unselectable
  • color: Any available preset (emerald, blue, red, etc)
  • size: sm, md (default), or lg
  • error: Shows an error message below the radio
  • hint: Shows a hint/description below the label
  • Works with wire:model (Livewire) and x-model (Alpine)
Combine them as you like!
blade 
            
1<x-radio name="plan" value="basic" label="Básico" />
2<x-radio name="plan" value="pro" label="Pro" checked />
3<x-radio name="newsletter" value="yes" label="Subscribe" :hint="'Recibe noticias y ofertas.'" />
4<x-radio name="newsletter" value="no" label="No thanks" disabled />
5<x-radio name="confirm" value="ok" label="Acepto términos" :error="'Debes aceptar para continuar.'" />

Radio Group with Options Array

You can render a group of radios by passing an :options array to x-radio-group.
Use inline for a horizontal layout, and customize the group with color, class, and all standard props.
This is the simplest way to render many radios with a single line!
blade 
            
 1<x-radio-group
 2    name="membership"
 3    wire:model="membership"
 4    :options="[
 5        ['value' => 'forever', 'label' => 'Lifetime'],
 6        ['value' => 'enough', 'label' => '10 awesome years'],
 7        ['value' => 'formaybe', 'label' => 'Ill see how it goes'],
 8        ['value' => 'unforever', 'label' => '14 seconds'],
 9    ]"
10    color="orange"
11    class="flex flex-col sm:flex-row items-start md:items-center gap-4"
12    inline
13/>

All Color Presets

All of these color presets are already available.
Use them via color="...":
blade 
            
 1<x-radio name="demo" value="Default" label="Default" />
 2<x-radio name="demo" value="gray" gray label="Gray" />
 3<x-radio name="demo" value="neutral" neutral label="Neutral" />
 4<x-radio name="demo" value="red" red label="Red" />
 5<x-radio name="demo" value="orange" orange label="Orange" />
 6<x-radio name="demo" value="amber" amber label="Amber" />
 7<x-radio name="demo" value="yellow" yellow label="Yellow" />
 8<x-radio name="demo" value="lime" lime label="Lime" />
 9<x-radio name="demo" value="green" green label="Green" />
10<x-radio name="demo" value="emerald" emerald label="Emerald" />
11<x-radio name="demo" value="teal" teal label="Teal" />
12<x-radio name="demo" value="cyan" cyan label="Cyan" />
13<x-radio name="demo" value="sky" sky label="Sky" />
14<x-radio name="demo" value="blue" blue label="Blue" />
15<x-radio name="demo" value="indigo" indigo label="Indigo" />
16<x-radio name="demo" value="violet" violet label="Violet" />
17<x-radio name="demo" value="purple" purple label="Purple" />
18<x-radio name="demo" value="fuchsia" fuchsia label="Fuchsia" />
19<x-radio name="demo" value="pink" pink label="Pink" />
20<x-radio name="demo" value="rose" rose label="Rose" />
21<x-radio name="demo" value="stone" stone label="Stone" />
22<x-radio name="demo" value="zinc" zinc label="Zinc" />
23<x-radio name="demo" value="slate" slate label="Slate" />

Available Sizes

These sizes are available via size="...":
blade 
            
1<x-radio size="sm" name="size-demo" value="xs" label="ExtraSmall" />
2<x-radio size="sm" name="size-demo" value="sm" label="Small" />
3<x-radio size="md" name="size-demo" value="md" label="Medium (default)" checked />
4<x-radio size="lg" name="size-demo" value="lg" label="Large" />
5<x-radio size="xl" name="size-demo" value="xl" label="ExtraLarge" />

Livewire Integration

Bind directly to Livewire with wire:model or Alpine.js with x-model for reactive forms:
blade 
            
1<x-radio name="settings.notifications" wire:model="settings.notifications" label="Enable notifications" />
Code highlighting provided by Torchlight