Wirestrap is still in active development

This project is pre-1.0 and may introduce breaking changes at any time without prior notice.

Checkbox

Checkbox with label, inline and reverse layout variants, and Livewire validation feedback. The id is auto-resolved from wire:model and from value when set, which makes checkbox groups work without manual ids.

Basic usage

Pass the label as a prop. Use the default slot instead when it contains HTML.

I agree to the terms

I agree to the terms of service

<x-wirestrap::checkbox
    wire:model="agree"
    label="I agree to the terms"
/>

{{-- Rich label via default slot --}}
<x-wirestrap::checkbox wire:model="agree">
    I agree to the <a href="/terms">terms of service</a>
</x-wirestrap::checkbox>

Layout

Add inline to display checkboxes side by side, or reverse to place the checkbox on the right of the label.

Music

Sports

Tech

<x-wirestrap::checkbox ... inline />
<x-wirestrap::checkbox ... inline />
<x-wirestrap::checkbox ... inline />

Remember me

<x-wirestrap::checkbox ... reverse />

Disabled

Unchecked

Checked

<x-wirestrap::checkbox ... disabled />

Validation

When wire:model is bound, the checkbox checks $errors for a matching key and applies the invalid style and message if found. Try submitting without checking the box below.

I agree to the terms

{{-- Suppress both the invalid class and the error message --}}
<x-wirestrap::checkbox ... :has-validation="false" />

{{-- Keep the invalid class, hide the error message --}}
<x-wirestrap::checkbox ... :has-validation-message="false" />

Props

Global configuration

Most prop defaults can be overridden globally via config/wirestrap.php.

x-wirestrap::checkbox

Prop	Type	Default	Description
`id`	`string\|null`	`null`	Checkbox id. Auto-resolved from wire:model, with value appended when set.
`label`	`ComponentSlot\|string\|null`	`null`	Label text or slot content. No label element is rendered when null.
`inline`	`bool`	`false`	Inline layout for side-by-side checkboxes.
`reverse`	`bool`	`false`	Place the checkbox on the right of the label.
`disabled`	`bool`	`false`	Disable the checkbox.
`has-validation-message`	`bool`	`config`	Render the error message below the checkbox.
`has-validation`	`bool`	`config`	Apply the invalid class when the wire:model key has an error.
`default-attributes`	`array`	`config`	Default HTML attributes merged onto the input element.
No results found

⭐ GitHub