php artisan aura:add checkbox

composer require bluestarsystem/aura-ui
php artisan aura:install

• Overview
• Basic Usage
• Props
• Variants/Examples
  • Simple Checkbox
  • With Description
  • Pre-checked
  • Disabled State
  • With Livewire
  • Checkbox Group
  • Consent With Links in the Label
  • With Validation Error
• Slots
• Events
• Accessibility

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" />

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

Props#

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" />

<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"
/>

<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 />

<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 />

<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#

<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>

<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>

Consent With Links in the Label#

The default slot is the label when label is not given, so the text can carry markup.

<x-aura::checkbox name="terms">I accept the <a href="#" class="text-aura-primary-600 underline">Terms</a> and the <a href="#" class="text-aura-primary-600 underline">Privacy Policy</a></x-aura::checkbox>

<x-aura::checkbox name="terms" required>
    I accept the <a href="/terms">Terms</a> and the <a href="/privacy">Privacy Policy</a>
</x-aura::checkbox>

With Validation Error#

<x-aura::checkbox
    label="I agree to the Terms of Service"
    name="terms"
    error="You must accept the terms to continue."
/>

<x-aura::checkbox label="I agree to the terms" name="terms" :error="$errors->first('terms')" />

Slots#

The default slot is the label when the label prop is not given. Use it when the label needs markup, such as links to the terms a user is accepting.

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.