Radio

<x-bt-radio />

A radio button input with label support, colors, sizes, label positioning, validation errors, and help text. No Alpine.js — state is handled entirely through CSS for a lightweight, accessible experience. Use standalone or within <x-bt-radio-group> for array-driven groups.
Customize via presets →

Basic Usage

Radio buttons with the same name form a mutually exclusive group.

Free Plan

Pro Plan

Enterprise Plan

1<x-bt-radio name="basic-plan" value="free" label="Free Plan" />
2<x-bt-radio name="basic-plan" value="pro" label="Pro Plan" checked />
3<x-bt-radio name="basic-plan" value="enterprise" label="Enterprise Plan" />

Label Content

The label can be set via the label prop or the default slot. The slot takes precedence and supports rich HTML.

Simple Label

Option One

1<x-bt-radio name="label-demo" value="1" label="Option One" />

Rich Label via Slot

Use the default slot for links, bold text, or other inline elements.

I accept the Terms of Service

1<x-bt-radio name="label-rich" value="yes">
2    I accept the <a href="#" class="underline text-blue-600 dark:text-blue-400">Terms of Service</a>
3</x-bt-radio>

Label Position

Place the label on the left or right side of the radio button.

Label on the right (default)

Label on the left

1<x-bt-radio name="pos-demo" value="right" label="Label on the right (default)" />
2<x-bt-radio name="pos-demo" value="left" label="Label on the left" label-position="left" />

Colors

Set the color with a magic attribute. Colors affect the border, checked background, hover, focus ring, inner dot, and label.

Beartropy (default)

Blue

Red

Green

Purple

Orange

1<x-bt-radio name="color-demo" value="beartropy" checked label="Beartropy (default)" />
2<x-bt-radio name="color-demo" value="blue" blue label="Blue" />
3<x-bt-radio name="color-demo" value="red" red label="Red" />
4<x-bt-radio name="color-demo" value="green" green label="Green" />
5<x-bt-radio name="color-demo" value="purple" purple label="Purple" />
6<x-bt-radio name="color-demo" value="orange" orange label="Orange" />

All available colors

primary, beartropy, red, blue, green, yellow, purple, pink, gray, orange, amber, lime, emerald, teal, cyan, sky, indigo, violet, rose, fuchsia, slate, stone, zinc, neutral.

Dynamic colors

Set the color dynamically with the color prop:
<x-bt-radio :color="$dynamicColor" name="r" value="1" label="Dynamic" />

Sizes

Five preset sizes from extra small to extra large.

Extra Small

Small

Medium (default)

Large

Extra Large

1<x-bt-radio xs name="size-demo" value="xs" label="Extra Small" />
2<x-bt-radio sm name="size-demo" value="sm" label="Small" />
3<x-bt-radio name="size-demo" value="md" label="Medium (default)" checked />
4<x-bt-radio lg name="size-demo" value="lg" label="Large" />
5<x-bt-radio xl name="size-demo" value="xl" label="Extra Large" />

Disabled State

Disabled radio buttons apply muted opacity and prevent interaction.

Disabled

Disabled checked

1<x-bt-radio name="disabled-demo" value="off" label="Disabled" :disabled="true" />
2<x-bt-radio name="disabled-demo" value="on" label="Disabled checked" :disabled="true" checked />

Help Text

Display helper text below the radio. help and hint are aliases.

Email notifications

Receive updates via email.

SMS notifications

Receive urgent alerts via text.

1<x-bt-radio name="help-demo" value="email" label="Email notifications" help="Receive updates via email." />
2<x-bt-radio name="help-demo" value="sms" label="SMS notifications" hint="Receive urgent alerts via text." />

Livewire Integration

Live Binding

Use wire:model.live to update the Livewire property immediately on selection.

Free

Pro

Enterprise

Selected: none

1<div class="space-y-3">
2    <x-bt-radio name="livePlan" value="free" label="Free" wire:model.live="livePlan" />
3    <x-bt-radio name="livePlan" value="pro" label="Pro" wire:model.live="livePlan" />
4    <x-bt-radio name="livePlan" value="enterprise" label="Enterprise" wire:model.live="livePlan" />
5</div>
6<p class="mt-3 text-sm text-gray-500">Selected: <strong>{{ $livePlan ?? 'none' }}</strong></p>

Deferred Binding

Default wire:model defers the update until the next Livewire action.

Free

Pro

Enterprise

1<x-bt-radio name="plan" value="free" label="Free" wire:model="plan" />
2<x-bt-radio name="plan" value="pro" label="Pro" wire:model="plan" />
3<x-bt-radio name="plan" value="enterprise" label="Enterprise" wire:model="plan" />

Validation Errors

Errors are automatically detected from the Laravel validation error bag. The border and label turn red, and an error message appears below.

Auto Validation

Click submit without selecting a plan to see the error.

Free

Pro

Enterprise

1<div class="space-y-3">
2    <x-bt-radio name="validatedPlan" value="free" label="Free" wire:model="validatedPlan" />
3    <x-bt-radio name="validatedPlan" value="pro" label="Pro" wire:model="validatedPlan" />
4    <x-bt-radio name="validatedPlan" value="enterprise" label="Enterprise" wire:model="validatedPlan" />
5</div>
6<x-bt-button wire:click="submitPlan" solid blue class="mt-3" sm>Submit</x-bt-button>

Custom Error

Force an error state regardless of validation.

Option A

Please select an option.

1<x-bt-radio name="custom-err" value="1" label="Option A" :custom-error="'Please select an option.'" />

Radio Group

Use <x-bt-radio-group> to render multiple radio buttons from an options array with shared name, color, size, and layout.

Vertical (default)

Choose a plan

Free

Pro

Enterprise

1<x-bt-radio-group
2    name="group-vertical"
3    :options="$planOptions"
4    label="Choose a plan"
5    value="pro"
6/>

Inline Layout

Use :inline="true" for a horizontal layout.

Free

Pro

Enterprise

1<x-bt-radio-group
2    name="group-inline"
3    :options="$planOptions"
4    :inline="true"
5    blue
6    value="free"
7/>

Group with Livewire

The wire:model is forwarded to each child radio automatically.

Subscription *

Free

Pro

Enterprise

Choose a plan that fits your needs.

Selected: none

 1<x-bt-radio-group
 2    id="radio-group-plan"
 3    name="groupPlan"
 4    wire:model.live="groupPlan"
 5    :options="$planOptions"
 6    label="Subscription"
 7    :required="true"
 8    green
 9    help="Choose a plan that fits your needs."
10/>
11<p class="mt-3 text-sm text-gray-500">Selected: <strong>{{ $groupPlan ?? 'none' }}</strong></p>

Real-World Example

A shipping method selector in an order form.

Shipping Method

Standard Shipping

5-7 business days. Free.

Express Shipping

2-3 business days. $9.99.

Overnight Shipping

Next business day. $24.99.

1<div class="max-w-sm space-y-4">
2    <p class="text-sm font-semibold text-slate-700 dark:text-slate-200">Shipping Method</p>
3    <x-bt-radio name="shipping" value="standard" label="Standard Shipping" help="5-7 business days. Free." checked />
4    <x-bt-radio name="shipping" value="express" label="Express Shipping" help="2-3 business days. $9.99." />
5    <x-bt-radio name="shipping" value="overnight" label="Overnight Shipping" help="Next business day. $24.99." />
6    <hr class="border-slate-200 dark:border-slate-700">
7    <x-bt-button solid blue class="w-full">Continue to Payment</x-bt-button>
8</div>

Slot	Description
`default`	Label content override. Takes precedence over the `label` prop. Supports rich HTML.

RADIO PROPS

Props for the individual <x-bt-radio> component.

Prop	Type	Default	Description
`label`	`string\|null`	`null`	Label text. Overridden by the default slot if both are provided.
`labelPosition`	`string\|null`	`right`	Label placement: `left` or `right`.
`color`	`string\|null`	`config default`	Color preset name. Use magic attributes or `:color="$var"` for dynamic values.
`size`	`string\|null`	`md`	Size preset: `xs`, `sm`, `md`, `lg`, `xl`.
`disabled`	`bool`	`false`	Disables the radio with `opacity-60` and `cursor-not-allowed`.
`grouped`	`bool`	`false`	Suppresses individual field-help. Set automatically when used inside `<x-bt-radio-group>`.
`help`	`string\|null`	`null`	Help text displayed below the radio.
`hint`	`string\|null`	`null`	Alias for `help`.
`customError`	`mixed`	`null`	Custom error message (bypasses validation bag).

HTML attributes

Standard HTML attributes (name, value, checked, required, id, wire:model) are forwarded to the native <input> element via $attributes. They are not constructor props.

RADIO GROUP PROPS

Props for the <x-bt-radio-group> wrapper component.

Prop	Type	Default	Description
`name` Required	`string`	`''`	Shared input name for all child radios.
`options` Required	`array`	`[]`	Array of `['value' => '...', 'label' => '...']` objects.
`value`	`mixed`	`null`	Default selected value. Pre-checks the matching radio.
`color`	`string\|null`	`config default`	Color applied to all child radios.
`size`	`string\|null`	`md`	Size applied to all child radios.
`inline`	`bool`	`false`	Horizontal layout (`flex gap-4 flex-wrap`).
`disabled`	`bool`	`false`	Disables all child radios.
`required`	`bool`	`false`	Shows a red asterisk on the group label.
`label`	`string\|null`	`null`	Group label text above the options.
`help`	`string\|null`	`null`	Help text below the group.
`hint`	`string\|null`	`null`	Alias for `help`.
`customError`	`mixed`	`null`	Custom error message (bypasses validation bag).

Code highlighting provided by Torchlight

Current version: 1.0.7

Basic Usage

Label Content

Simple Label

Rich Label via Slot

Label Position

Colors

Sizes

Disabled State

Help Text

Livewire Integration

Live Binding

Deferred Binding

Validation Errors

Auto Validation

Custom Error

Radio Group

Vertical (default)

Inline Layout

Group with Livewire

Real-World Example

Slots

RADIO PROPS

RADIO GROUP PROPS