The Checkbox component renders a checkbox input with automatic state management, supporting both single checkboxes and checkbox arrays.
Basic Usage
<x-forms::checkbox
name="check_me"
label="Check Me"
/>
Attributes
The name attribute for the checkbox input
Label text for the checkbox. Auto-generated from name if not provided
The value submitted when checkbox is checked
Model instance for checked state binding. Can be Eloquent model, array, or object
default
bool|mixed
default:"false"
Default checked state when no model is bound and no old input exists
Mark checkbox as required
Show/hide the label element
Display validation errors
Display JavaScript validation errors
Render in inline layout. When true, label shows as space only
CSS classes for inline label
CSS classes for inline input wrapper
Examples
Basic Checkbox
<x-forms::checkbox
name="agree"
label="I agree to the terms"
/>
Required Checkbox
<x-forms::checkbox
name="terms"
label="Accept Terms & Conditions"
required
/>
required attribute on input- Required asterisk (*) in label
With Custom Value
<x-forms::checkbox
name="newsletter"
label="Subscribe to newsletter"
value="yes"
/>
Checked by Default
<x-forms::checkbox
name="notifications"
label="Enable notifications"
:default="true"
/>
Model Binding (Single Value)
<x-forms::form :model="$user">
<x-forms::checkbox
name="is_active"
label="Active"
/>
</x-forms::form>
$user->is_active is truthy.
Model Binding (Array Value)
<x-forms::form :model="$user">
<x-forms::checkbox
name="permissions[]"
label="Can Edit"
value="edit"
/>
<x-forms::checkbox
name="permissions[]"
label="Can Delete"
value="delete"
/>
</x-forms::form>
$user->permissions array.
Inline Checkbox
<x-forms::checkbox
name="remember_me"
label="Remember me"
inline
/>
inline is true:
show-label is automatically set to true- Label text renders as space only inside the checkbox label
- Required indicator is hidden
With Help Text
<x-forms::checkbox
name="opt_in"
label="Marketing Emails"
>
<x-slot name="help">
Receive promotional emails and special offers
</x-slot>
</x-forms::checkbox>
Checkbox Group
<fieldset>
<legend>Select your interests</legend>
<x-forms::checkbox
name="interests[]"
label="Technology"
value="tech"
/>
<x-forms::checkbox
name="interests[]"
label="Sports"
value="sports"
/>
<x-forms::checkbox
name="interests[]"
label="Music"
value="music"
/>
</fieldset>
Checked State Logic
The component determines the checked state in this order:
- Old Input (highest priority)
- If
old($name) exists, checks if $value is in the old input array/value
- Model Binding
- For arrays: Checks if
$value exists in the model’s array
- For single values: Uses the truthy value from model
- Default Value (lowest priority)
- Uses the
default attribute
Example Checked State Scenarios
{{-- Checked if old('permissions') contains 'admin' --}}
<x-forms::checkbox name="permissions[]" value="admin" />
{{-- Checked if $user->is_active is truthy --}}
<x-forms::form :model="$user">
<x-forms::checkbox name="is_active" />
</x-forms::form>
{{-- Checked if $user->roles array contains 'editor' --}}
<x-forms::form :model="$user">
<x-forms::checkbox name="roles[]" value="editor" />
</x-forms::form>
{{-- Checked by default (no old input or model) --}}
<x-forms::checkbox name="subscribe" :default="true" />
HTML Structure
The component renders with Bootstrap 5 structure:
<div class="form-group">
<div class="form-check">
<input
type="checkbox"
class="form-check-input"
id="check_me"
name="check_me"
value="1"
>
<label class="form-check-label" for="check_me">
Check Me
<span class="required">*</span> {{-- if required --}}
</label>
</div>
<small class="form-text">Help text here</small> {{-- if help slot provided --}}
<div class="invalid-feedback">Error message</div> {{-- if validation error --}}
</div>
CSS Classes
The checkbox input includes:
form-check-input - Bootstrap 5 checkbox classis-invalid - Added when validation errors exist
Validation
Checkboxes support standard Laravel validation:
// Controller
$request->validate([
'agree' => 'required|accepted',
'permissions' => 'array',
'permissions.*' => 'string',
]);
show-errors is true.
Arrayable Values
The component handles Arrayable instances (Collections, etc.):
{{-- $user->permissions is a Collection --}}
<x-forms::form :model="$user">
<x-forms::checkbox
name="permissions[]"
value="edit"
/>
</x-forms::form>