Checkbox

x-checkbox

An accessible checkbox with label, description, custom icon, and clickable-card layouts. Works with wire:model.

php artisan components:add checkbox

Playground

label description checked disabled clickable icon hideCheckbox

Examples

Basic, checked & disabled

Label, description and disabled states.

<div class="grid w-full max-w-md justify-center gap-4">
    <x-components.checkbox label="Email notifications" description="Get notified when something happens." checked />
    <x-components.checkbox label="SMS notifications" description="Standard rates may apply." />
    <x-components.checkbox label="Disabled option" disabled />
</div>

Clickable row

Make the whole row a single click target.

<div class="flex w-full max-w-md justify-center">
    <x-components.checkbox clickable label="Auto-renew subscription" description="Click anywhere on this row to toggle." />
</div>

Props

Prop	Type	Default	Description
`label`	text	`—`	Label text shown next to the checkbox.
`description`	text	`—`	Secondary helper text under the label.
`checked`	boolean	`false`	Whether the checkbox starts checked.
`disabled`	boolean	`false`	Disable the checkbox.
`clickable`	boolean	`false`	Make the whole row a single click target.
`icon`	text	`—`	An optional component name to use instead of the default checkmark.
`hideCheckbox`	boolean	`false`	Hide the visual box (useful for custom toggles).

Slots

Slot	Description
`slot`	Custom content instead of the label/description props.