x-bt-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-bt-radio-group>.You can customize this component
Radio Variations
1<x-bt-radio name="plan" value="basic" label="Básico" />2<x-bt-radio name="plan" value="pro" label="Pro" checked />3<x-bt-radio name="newsletter" value="yes" label="Subscribe" :hint="'Recibe noticias y ofertas.'" />4<x-bt-radio name="newsletter" value="no" label="No thanks" disabled />5<x-bt-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-bt-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!
1<x-bt-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 inline13/>All Color Presets
All of these color presets are already available.
Use them via color="...":
1<x-bt-radio name="demo" value="Default" label="Default" /> 2<x-bt-radio name="demo" value="gray" gray label="Gray" /> 3<x-bt-radio name="demo" value="neutral" neutral label="Neutral" /> 4<x-bt-radio name="demo" value="red" red label="Red" /> 5<x-bt-radio name="demo" value="orange" orange label="Orange" /> 6<x-bt-radio name="demo" value="amber" amber label="Amber" /> 7<x-bt-radio name="demo" value="yellow" yellow label="Yellow" /> 8<x-bt-radio name="demo" value="lime" lime label="Lime" /> 9<x-bt-radio name="demo" value="green" green label="Green" />10<x-bt-radio name="demo" value="emerald" emerald label="Emerald" />11<x-bt-radio name="demo" value="teal" teal label="Teal" />12<x-bt-radio name="demo" value="cyan" cyan label="Cyan" />13<x-bt-radio name="demo" value="sky" sky label="Sky" />14<x-bt-radio name="demo" value="blue" blue label="Blue" />15<x-bt-radio name="demo" value="indigo" indigo label="Indigo" />16<x-bt-radio name="demo" value="violet" violet label="Violet" />17<x-bt-radio name="demo" value="purple" purple label="Purple" />18<x-bt-radio name="demo" value="fuchsia" fuchsia label="Fuchsia" />19<x-bt-radio name="demo" value="pink" pink label="Pink" />20<x-bt-radio name="demo" value="rose" rose label="Rose" />21<x-bt-radio name="demo" value="stone" stone label="Stone" />22<x-bt-radio name="demo" value="zinc" zinc label="Zinc" />23<x-bt-radio name="demo" value="slate" slate label="Slate" />Available Sizes
These sizes are available via size="...":
1<x-bt-radio size="xs" name="size-demo" value="xs" label="ExtraSmall" />2<x-bt-radio size="sm" name="size-demo" value="sm" label="Small" />3<x-bt-radio size="md" name="size-demo" value="md" label="Medium (default)" checked />4<x-bt-radio size="lg" name="size-demo" value="lg" label="Large" />5<x-bt-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:
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label
|
string|null
|
null
|
Optional text label displayed next to the radio button.
|
disabled
|
bool
|
false
|
Disables the radio button, preventing selection and applying the disabled styling preset.
|
color
|
string|null
|
null
|
Color preset applied to the radio. Supports all standard Beartropy colors:
emerald, blue, red, etc.
|
size
|
string
|
md
|
Size of the radio button. Supported values:
sm, md (default), and lg.
|
error
|
bool|string
|
false
|
Displays an error state.
When a string is provided, it is shown as the validation message below the radio.
|
hint
|
string|null
|
null
|
Optional descriptive text displayed below the radio label.
|
wire:model / x-model
|
binding
|
null
|
Supports Livewire (
wire:model) and Alpine (x-model) for reactive selection.
The radio value is synchronized automatically with the bound variable.
|