Logo Beartropy

Checkboxes

The x-checkbox component is a beautiful, accessible, and fully customizable checkbox.
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.
You can customize this component

Checkbox Variations

The checkbox supports these props:
  • name: Checkbox name attribute (required for forms)
  • checked: Whether the box is checked (true/false)
  • disabled: Disables the checkbox
  • color: Any of the available color presets (primary, blue, red, etc)
  • size: xs, sm, md (default), or lg
  • Works with wire:model for Livewire
  • Shows validation errors automatically if used with Livewire
You can combine them as you wish!
blade 
            
1<x-checkbox checked name="checkboxDefault">Default (Primary)</x-checkbox>
2<x-checkbox checked red name="checkboxRed">Red</x-checkbox>
3<x-checkbox checked blue name="checkboxBlue">Blue</x-checkbox>
4<x-checkbox checked emerald name="checkboxEmerald">Emerald</x-checkbox>
5<x-checkbox checked amber name="checkboxAmber">Amber</x-checkbox>
6<x-checkbox checked disabled name="checkboxDisabled">Disabled</x-checkbox>
7<x-checkbox checked name="checkboxSm" size="sm">Small</x-checkbox>
8<x-checkbox checked name="checkboxLg" size="lg" pink>Large Pink</x-checkbox>
9<x-checkbox checked name="withModel" wire:model="checkboxValue" green>With wire:model</x-checkbox>

All Color Presets

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

Available Sizes

These sizes are available via size="...":
blade 
            
1<x-checkbox checked name="checkboxXs" xs>Extra small</x-checkbox>
2<x-checkbox checked name="checkboxSm" sm>Small</x-checkbox>
3<x-checkbox checked name="checkboxMd" md>Medium (default)</x-checkbox>
4<x-checkbox checked name="checkboxLg" lg>Large</x-checkbox>
5<x-checkbox checked name="checkboxXs" xl>Extra large</x-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.
blade 
            
1<x-checkbox checked name="terms" wire:model="acceptedTerms">
2    I accept the <a href="#" class="underline">terms and conditions</a>
3</x-checkbox>
Code highlighting provided by Torchlight