Switch

A styled native checkbox with role="switch". Pass label / description to compose field helpers automatically.

Usage

Dark mode

Automatically switch the interface theme.

example.blade.php

<x-slate::switch
    class="max-w-sm"
    label="Dark mode"
    description="Automatically switch the interface theme."
    checked
/>

<x-slate::switch
    class="max-w-sm"
    label="Dark mode"
    description="Automatically switch the interface theme."
    checked
/>

Control only

Use the bare switch when the label lives elsewhere in the layout.

Airplane mode

Disable radios and networking.

example.blade.php

<div class="flex items-center justify-between gap-4">
    <div>
        <p class="text-sm font-medium">Airplane mode</p>
        <p class="text-sm text-muted-foreground">Disable radios and networking.</p>
    </div>
    <x-slate::switch id="airplane" />
</div>

<div class="flex items-center justify-between gap-4">
    <div>
        <p class="text-sm font-medium">Airplane mode</p>
        <p class="text-sm text-muted-foreground">Disable radios and networking.</p>
    </div>
    <x-slate::switch id="airplane" />
</div>

Invalid state

Marketing emails

Enable this before saving.

example.blade.php

<x-slate::switch
    name="marketing"
    label="Marketing emails"
    error-message="Enable this before saving."
/>

<x-slate::switch
    name="marketing"
    label="Marketing emails"
    error-message="Enable this before saving."
/>

Props

Prop	Type	Default	Description
`label`	`string`	—	Composes `field` + `field-label`
`description`	`string`	—	Composes `field-description`
`errorMessage`	`string`	—	Manual error copy
`showError`	`bool`	`true` when composed	Render `field-error`
`name`	`string`	—	Input name
`value`	`string`	`"1"`	Submitted value when on
`checked`	`bool`	`false`	Initial state
`errorKey`	`string`	—	Override validation key

All standard HTML attributes pass through to the control.