Logo Beartropy UI
Checkbox
The x-bt-checkbox component is a beautiful, accessible, and fully customizable checkbox for your forms. It supports inline labels, sizes, disabled state, and color presets for instant branding. Use it standalone, with wire:model for Livewire, and with any color or size preset.

All Color Presets

All of these color presets are already available.
Use them via color="..." or by just writing red, blue, etc: 

 1<x-bt-checkbox checked name="default">Default</x-bt-checkbox>
 2<x-bt-checkbox checked gray name="gray">Gray</x-bt-checkbox>
 3<x-bt-checkbox checked neutral name="neutral">Neutral</x-bt-checkbox>
 4<x-bt-checkbox checked red name="red">Red</x-bt-checkbox>
 5<x-bt-checkbox checked orange name="orange">Orange</x-bt-checkbox>
 6<x-bt-checkbox checked amber name="amber">Amber</x-bt-checkbox>
 7<x-bt-checkbox checked yellow name="yellow">Yellow</x-bt-checkbox>
 8<x-bt-checkbox checked lime name="lime">Lime</x-bt-checkbox>
 9<x-bt-checkbox checked green name="green">Green</x-bt-checkbox>
10<x-bt-checkbox checked emerald name="emerald">Emerald</x-bt-checkbox>
11<x-bt-checkbox checked teal name="teal">Teal</x-bt-checkbox>
12<x-bt-checkbox checked cyan name="cyan">Cyan</x-bt-checkbox>
13<x-bt-checkbox checked sky name="sky">Sky</x-bt-checkbox>
14<x-bt-checkbox checked blue name="blue">Blue</x-bt-checkbox>
15<x-bt-checkbox checked indigo name="indigo">Indigo</x-bt-checkbox>
16<x-bt-checkbox checked violet name="violet">Violet</x-bt-checkbox>
17<x-bt-checkbox checked purple name="purple">Purple</x-bt-checkbox>
18<x-bt-checkbox checked fuchsia name="fuchsia">Fuchsia</x-bt-checkbox>
19<x-bt-checkbox checked pink name="pink">Pink</x-bt-checkbox>
20<x-bt-checkbox checked rose name="rose">Rose</x-bt-checkbox>
21<x-bt-checkbox checked stone name="stone">Stone</x-bt-checkbox>
22<x-bt-checkbox checked zinc name="zinc">Zinc</x-bt-checkbox>
23<x-bt-checkbox checked slate name="slate">Slate</x-bt-checkbox>

Available Sizes

These sizes are available via size="...": 

1<x-bt-checkbox checked name="checkboxXs" xs>Extra small</x-bt-checkbox>
2<x-bt-checkbox checked name="checkboxSm" sm>Small</x-bt-checkbox>
3<x-bt-checkbox checked name="checkboxMd" md>Medium (default)</x-bt-checkbox>
4<x-bt-checkbox checked name="checkboxLg" lg>Large</x-bt-checkbox>
5<x-bt-checkbox checked name="checkboxXs" xl>Extra large</x-bt-checkbox>

Livewire Integration

You can bind it directly to Livewire using wire:model for reactive forms:
Validation errors are shown automatically when used in Livewire forms.

Terms and conditions acceptance status: Not accepted

1Terms and conditions acceptance status: <span class="{{ $acceptedTerms ? 'text-emerald-500' : 'text-red-500' }}">{{ $acceptedTerms ? 'Accepted' : 'Not accepted' }}</span><br><br>
2<x-bt-checkbox checked name="terms" wire:model.live="acceptedTerms">
3    I accept the <a href="#" class="underline">terms and conditions</a>
4</x-bt-checkbox>

Props

Prop Type Default Description
id
string auto-generated
Unique checkbox ID. If not provided, an ID like beartropy-checkbox-xxxxx is automatically generated.
name
string null
The checkbox name attribute. Useful in forms or when used with Livewire wire:model.
value
string null
The checkbox value attribute.
checked
bool false
Marks the checkbox as checked initially. Can also be controlled via wire:model.
disabled
bool false
Disables the checkbox and applies the disabled styling preset.
indeterminate
bool false
Shows the checkbox in an indeterminate (mixed) state. Visual only; does not affect the value submitted.
color
string null
Optional color preset key to override the default checkbox color styling.
error
bool|string false
Sets the checkbox into an error state. If a string is provided, it is shown as the error message.
description
string null
Additional text describing the checkbox (displayed as field help).
label
string null
The text label for the checkbox. Ignored if the slot contains custom label content.
labelPosition
string right
Defines the label position relative to the checkbox. Accepted values: left or right.
slot
slot null
Optional slot that replaces the label text entirely. Useful for rich or formatted labels.
Code highlighting provided by Torchlight