Checkbox Component

The Checkbox component provides a flexible way to create checkboxes with labels, descriptions, and optional container styling. It supports dark mode and integrates seamlessly with Livewire.

Basic Usage

The simplest checkbox with a label:

<x-checkbox label="Accept terms" />

Label Position

Control the label position (left or right). Note: containers always have labels on the left.

<x-checkbox label="Label on left" labelPosition="left" />
<x-checkbox label="Label on right" labelPosition="right" />

With Description

Add a description below the checkbox label:

<x-checkbox 
    label="Enable notifications" 
    description="Receive email updates about your account activity"
/>

With Container

Use the container style for a more prominent appearance:

<x-checkbox 
    label="Premium features" 
    :withContainer="true"
/>

Disabled State

Disable user interaction:

<x-checkbox label="Disabled unchecked" :disabled="true" />
<x-checkbox label="Disabled checked" :checked="true" :disabled="true" />

Livewire Integration

Use with Livewire's wire:model:

<x-checkbox 
    label="Remember me" 
    wire:model="rememberMe"
/>

<x-checkbox 
    label="Live update" 
    wire:model.live="liveUpdate"
/>

Multiple Checkboxes

Group multiple checkboxes together:

<div class="flex flex-col gap-3">
    <x-checkbox label="Option 1" name="options[]" />
    <x-checkbox label="Option 2" name="options[]" />
    <x-checkbox label="Option 3" name="options[]" />
</div>

Props Reference

Prop	Type	Default	Description
id	string|null	null	Unique identifier for the checkbox. Auto-generated if not provided.
label	string|null	null	Label text displayed next to the checkbox.
description	string|null	null	Description text displayed below the checkbox (only when provided).
labelPosition	string	right	Position of the label. Options: left, right. Note: When withContainer is true, label is always on the left.
checked	bool	false	Initial checked state of the checkbox.
disabled	bool|null	null	Disables the checkbox when true.
withContainer	bool	false	Applies container styling with border and padding.
name	string	-	Name attribute for form submission.
wire:model	string	-	Livewire model binding (also supports wire:model.live and wire:model.defer).

References

Category	Path / Name	Description
Component	resources/views/components/checkbox.blade.php	Checkbox component file

For the detailed documentation, please visit the Penguin UI Checkboxes.