Skip to content

Overview

The Checkbox component renders a styled checkbox input wrapped in a <label> for easy click targeting. It supports a text label, an optional description below the label, value binding, and disabled state. The component is designed to work seamlessly with Livewire's wire:model directive.

Use checkboxes for:

  • Boolean on/off settings
  • Terms and conditions acceptance
  • Feature toggles in forms
  • Multi-select option lists

Basic Usage

<x-aura::checkbox label="Accept terms and conditions" name="terms" />

Props

Prop Type Default Description
label string|null null Text label displayed next to the checkbox
description string|null null Helper text displayed below the label
value string|null null The value attribute of the input
disabled bool false Disable the checkbox

All additional attributes (e.g., name, id, wire:model, checked, required) are passed through to the underlying <input> element.

Variants/Examples

Simple Checkbox

<x-aura::checkbox label="Remember me" name="remember" />

With Description

<x-aura::checkbox
    label="Email notifications"
    description="Receive email notifications when someone comments on your post."
    name="email_notifications"
/>

Pre-checked

<x-aura::checkbox label="Subscribe to newsletter" name="newsletter" checked />

Disabled State

<x-aura::checkbox label="Premium feature" name="premium" disabled />
<x-aura::checkbox label="Included in plan" name="included" checked disabled />

With Livewire

<x-aura::checkbox
    label="Send notifications"
    wire:model="sendNotifications"
/>

{{-- With live updates --}}
<x-aura::checkbox
    label="Dark mode"
    wire:model.live="darkMode"
/>

Checkbox Group

Select your interests 
<fieldset>
    <legend class="aura-label">Select your interests</legend>
    <div class="space-y-2 mt-2">
        <x-aura::checkbox label="Technology" name="interests[]" value="tech" />
        <x-aura::checkbox label="Design" name="interests[]" value="design" />
        <x-aura::checkbox label="Business" name="interests[]" value="business" />
        <x-aura::checkbox label="Science" name="interests[]" value="science" />
    </div>
</fieldset>

With Validation Error (Manual)

<x-aura::checkbox label="I agree to the terms" name="terms" />
@error('terms')
    <p class="aura-input-error-text">{{ $message }}</p>
@enderror

Slots

The Checkbox component does not use slots. All content is driven by props.

Events

Standard HTML and framework events can be attached via attributes:

{{-- Alpine.js --}}
<x-aura::checkbox
    label="Toggle all"
    x-on:change="toggleAll($event.target.checked)"
/>

{{-- Livewire --}}
<x-aura::checkbox
    label="Active"
    wire:model.live="isActive"
/>

Accessibility

  • The checkbox is wrapped in a <label> element, making the entire label text clickable.
  • When disabled, the wrapper includes aria-disabled="true" for assistive technology.
  • The custom checkbox visual includes an SVG checkmark that is rendered inline for crisp display.
  • The actual <input type="checkbox"> remains in the DOM for form submission and assistive technology.
  • Use a <fieldset> with <legend> when grouping multiple related checkboxes.
  • The component supports standard keyboard interaction: Space to toggle, Tab to navigate.