Checkbox

<x-bt-checkbox />

A checkbox 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.
Customize via presets →

Basic Usage

I agree to the terms

Subscribe to newsletter

1<x-bt-checkbox label="I agree to the terms" name="basic-terms" />
2<x-bt-checkbox label="Subscribe to newsletter" name="basic-newsletter" />

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

Accept terms

1<x-bt-checkbox label="Accept terms" name="label-simple" />

Rich Label via Slot

Use the default slot for HTML content like links, bold text, or inline elements.

I accept the Terms of Service and Privacy Policy

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

Label Position

Place the label on the left or right side of the checkbox.

Label on the right (default)

Label on the left

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

Colors

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

Beartropy (default)

Blue

Red

Green

Purple

Orange

1<x-bt-checkbox :checked="true" label="Beartropy (default)" name="color-beartropy" />
2<x-bt-checkbox :checked="true" blue label="Blue" name="color-blue" />
3<x-bt-checkbox :checked="true" red label="Red" name="color-red" />
4<x-bt-checkbox :checked="true" green label="Green" name="color-green" />
5<x-bt-checkbox :checked="true" purple label="Purple" name="color-purple" />
6<x-bt-checkbox :checked="true" orange label="Orange" name="color-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-checkbox :color="$dynamicColor" label="Dynamic" />

Sizes

Five preset sizes. Sizes xs/sm/md use rounded-sm; sizes lg/xl use rounded-md.

Extra Small

Small

Medium (default)

Large

Extra Large

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

Checked State

Set the initial checked state with the checked prop.

Unchecked

Checked

1<x-bt-checkbox label="Unchecked" name="checked-off" />
2<x-bt-checkbox label="Checked" :checked="true" name="checked-on" />

Disabled State

Disabled checkboxes apply muted opacity and prevent interaction.

Disabled unchecked

Disabled checked

1<x-bt-checkbox label="Disabled unchecked" :disabled="true" name="disabled-off" />
2<x-bt-checkbox label="Disabled checked" :disabled="true" :checked="true" name="disabled-on" />

With Value

Use name and value for traditional form checkbox groups.

Admin

Editor

Viewer

1<x-bt-checkbox name="roles[]" value="admin" label="Admin" />
2<x-bt-checkbox name="roles[]" value="editor" label="Editor" />
3<x-bt-checkbox name="roles[]" value="viewer" label="Viewer" :checked="true" />

Help Text

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

Email notifications

You will receive email notifications for important updates.

Public profile

Your profile will be visible to everyone.

1<x-bt-checkbox label="Email notifications" help="You will receive email notifications for important updates." name="help-email" />
2<x-bt-checkbox label="Public profile" hint="Your profile will be visible to everyone." name="help-profile" />

Livewire Integration

Live Binding

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

I accept the terms

Status: Not accepted

1<x-bt-checkbox id="checkbox-terms" wire:model.live="acceptedTerms" green label="I accept the terms" />
2<p class="mt-2 text-sm text-gray-500">
3    Status: <strong class="{{ $acceptedTerms ? 'text-emerald-600' : 'text-red-500' }}">{{ $acceptedTerms ? 'Accepted' : 'Not accepted' }}</strong>
4</p>

Deferred Binding

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

Enable notifications

1<x-bt-checkbox id="checkbox-notifications" wire:model="notifications" label="Enable notifications" />

Validation Errors

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

Auto Validation

Click submit without checking the box to see the error.

I agree to the terms and conditions

1<x-bt-checkbox id="checkbox-agreed" wire:model="agreedToTerms" label="I agree to the terms and conditions" />
2<x-bt-button wire:click="submitTerms" solid blue class="mt-3" sm>Submit</x-bt-button>

Custom Error

Force an error state regardless of validation.

You must accept the terms.

1<x-bt-checkbox label="Accept" name="custom-err" :custom-error="'You must accept the terms.'" />

Real-World Example

A notification preferences form with grouped checkboxes.

Notification Preferences

Email notifications

Receive updates via email.

SMS notifications

Receive urgent alerts via text.

Push notifications

Receive browser push notifications.

Marketing emails

Occasional product updates and offers.

1<div class="max-w-sm space-y-4">
2    <p class="text-sm font-semibold text-slate-700 dark:text-slate-200">Notification Preferences</p>
3    <x-bt-checkbox name="notif[]" value="email" label="Email notifications" :checked="true" help="Receive updates via email." />
4    <x-bt-checkbox name="notif[]" value="sms" label="SMS notifications" help="Receive urgent alerts via text." />
5    <x-bt-checkbox name="notif[]" value="push" label="Push notifications" :checked="true" help="Receive browser push notifications." />
6    <hr class="border-slate-200 dark:border-slate-700">
7    <x-bt-checkbox name="marketing" label="Marketing emails" help="Occasional product updates and offers." />
8</div>

Slot	Description
`default`	Label content override. Takes precedence over the `label` prop. Supports rich HTML (links, bold, etc.).

Prop	Type	Default	Description
`id`	`string\|null`	`auto-generated`	Input ID attribute. Auto-generated if not provided.
`name`	`string\|null`	`null`	Input name attribute.
`value`	`mixed`	`null`	Input value attribute. Useful for checkbox groups.
`checked`	`bool`	`false`	Initial checked state. Can also be controlled via `wire:model`.
`disabled`	`bool`	`false`	Disables the checkbox with `opacity-60` and `cursor-not-allowed`.
`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`.
`label`	`string\|null`	`null`	Label text. Overridden by the default slot if both are provided.
`labelPosition`	`string`	`right`	Label placement: `left` or `right`.
`help`	`string\|null`	`null`	Help text displayed below the checkbox.
`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