Checkbox
Checkbox component for single or multiple selection from a group of options
Basic Usage
The most basic checkbox with a label:
<neura::checkbox label="Accept terms and conditions" name="terms" />
<neura::checkbox label="Subscribe to newsletter" name="newsletter" />
<neura::checkbox label="Enable notifications" name="notifications" />With Descriptions
Add descriptions to checkboxes for more context:
<neura::checkbox
label="Email notifications"
description="Receive email updates about your account activity"
name="email_notifications"
/>Checkbox Groups
Group multiple checkboxes together to manage their state collectively:
<neura::checkbox.group>
<neura::checkbox value="option1" label="Option 1" />
<neura::checkbox value="option2" label="Option 2" />
<neura::checkbox value="option3" label="Option 3" />
</neura::checkbox.group>Variants
The checkbox component supports multiple visual variants:
Default Variant
Pills Variant
Option 1
Option 2
Option 3
Cards Variant
This is a card variant checkbox with description
Card variant provides a more prominent visual style
<neura::checkbox.group variant="default">...</neura::checkbox.group>
<neura::checkbox.group variant="pills">...</neura::checkbox.group>
<neura::checkbox.group variant="cards">...</neura::checkbox.group>With Livewire
For single checkboxes, use
wire:model directly on the checkbox component. For groups, use wire:model on the group wrapper:
Single Checkbox
Value: false
<neura::checkbox
label="Accept terms"
wire:model.live="acceptTerms"
/>
<!-- In your Livewire component -->
public $acceptTerms = false;Checkbox Group
For checkbox groups, place
wire:model on the group, not on individual checkboxes. The group will manage an array of selected values:
Selected: []
<neura::checkbox.group wire:model.live="selectedOptions">
<neura::checkbox value="option1" label="Option 1" />
<neura::checkbox value="option2" label="Option 2" />
<neura::checkbox value="option3" label="Option 3" />
</neura::checkbox.group>
<!-- In your Livewire component -->
public $selectedOptions = [];
Important: Do not use
wire:model on individual checkboxes when they are inside a group. The group manages the state collectively.
Default Checked
The
checked prop only works for static checkboxes (without Livewire or groups). For checkboxes with Livewire or in groups, you must initialize the state in your component.
Static Checkbox
For static checkboxes (no Livewire, no group), use the
checked attribute:
<neura::checkbox
label="Option 1"
checked
/>With Livewire
When using
wire:model, the checked prop is ignored. Initialize the property in your Livewire component instead:
<neura::checkbox
label="Accept terms"
wire:model.live="acceptTerms"
/>
<!-- In your Livewire component -->
public $acceptTerms = true; // Initialize as checkedIn Checkbox Groups
For checkbox groups, the
checked prop on individual checkboxes is ignored. Initialize the array with selected values in your component:
<neura::checkbox.group wire:model.live="selectedOptions">
<neura::checkbox value="option1" label="Option 1" />
<neura::checkbox value="option2" label="Option 2" />
</neura::checkbox.group>
<!-- In your Livewire component -->
public $selectedOptions = ['option1']; // Pre-select option1
Note: The
checked prop is only effective for standalone checkboxes without any state management (no Livewire, no groups). For all other cases, manage the initial state through your component's properties.
Indeterminate State
Use the indeterminate state to represent partial selection (useful for "select all"):
<neura::checkbox
label="Select All"
:indeterminate="true"
/>Disabled State
Disable individual checkboxes:
<neura::checkbox
label="Option 2"
:disabled="true"
/>Sizes
The checkbox component supports different sizes:
<neura::checkbox size="xs" label="Extra Small" />
<neura::checkbox size="sm" label="Small" />
<neura::checkbox size="md" label="Medium" />
<neura::checkbox size="lg" label="Large" />
<neura::checkbox size="xl" label="Extra Large" />Invalid State
Display an error state with invalid="true":
<neura::checkbox
label="You must accept the terms"
:invalid="true"
/>Use Cases
Preferences Settings
Notification Preferences
Feature Selection with Cards
Track detailed metrics and generate custom reports
Get programmatic access to your data
24/7 dedicated support channel
Best Practices
✓ Do
- Use clear and descriptive labels
- Add descriptions for complex options
- Use groups to organize related options
- Use indeterminate state for "Select All" when appropriate
- Group checkboxes with checkbox.group for better state management
✗ Don't
- Don't use checkboxes for single selection (use radio buttons)
- Don't create too many options (max 7-10 recommended)
- Don't use labels that are too long or ambiguous
- Don't forget to validate selection on the server side
- Don't mix checkboxes and radio buttons in the same group
Properties
Checkbox Properties
| Property | Type | Default | Description |
|---|---|---|---|
| label | string|null | null | Checkbox label |
| description | string|null | null | Additional description displayed below the label |
| value | mixed | null | Checkbox value (required in a group) |
| name | string|null | null | Field name for form submission |
| checked | bool | false | Check the checkbox by default |
| indeterminate | bool | false | Indeterminate state (partial selection) |
| disabled | bool | false | Disable the checkbox |
| invalid | bool | false | Display an error state |
| size | string | 'md' | Checkbox size. Values: 'xs', 'sm', 'md', 'lg', 'xl' |
| variant | string | 'default' | Visual variant (inherits from group). Values: 'default', 'pills', 'cards' |
| indicator | bool | true | Display the checkbox visual indicator |
Checkbox Group Properties
| Property | Type | Default | Description |
|---|---|---|---|
| variant | string | 'default' | Visual variant applied to all checkboxes in the group. Values: 'default', 'pills', 'cards' |