Get started
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Checkbox

A styled native <input type="checkbox">. Use it bare, or pass label / description to compose field helpers automatically — same progressive pattern as dark-mode-toggle on button.

Usage
example.blade.php 
<x-slate::checkbox label="Accept terms" checked />

With description

Receive occasional release notes by email.

example.blade.php 
<x-slate::checkbox
    class="max-w-sm"
    name="updates"
    label="Product updates"
    description="Receive occasional release notes by email."
/>

Control only

Skip label / description when you want the bare control for custom layouts.

example.blade.php 
<div class="flex items-center gap-3">
    <x-slate::checkbox id="terms-bare" checked />
    <label for="terms-bare" class="text-sm">Accept terms</label>
</div>

Rounded styles
example.blade.php 
<div class="flex flex-wrap items-center gap-4">
    <x-slate::checkbox rounded="sm" checked />
    <x-slate::checkbox rounded="md" checked />
    <x-slate::checkbox rounded="lg" checked />
</div>

Invalid state

You must accept before continuing.

example.blade.php 
<x-slate::checkbox
    name="invalid-checkbox"
    label="I agree"
    error-message="You must accept before continuing."
/>

Props
Prop Type Default Description
label string — When set, composes field + field-label
description string — Composes field-description beside the control
errorMessage string — Manual error copy (also enables composed layout)
showError bool true when composed Render field-error under the control
name string — Input name (also via HTML attribute)
value string "1" Submitted value when checked
checked bool false Initial checked state
errorKey string — Override validation key for error wiring
rounded none, sm, md, lg, xl, full md Indicator corner radius

All standard HTML attributes (disabled, required, wire:model, etc.) pass through to the control.

Last updated . · Legal