Switch

Free shipping

<flux:field variant="inline">
    <flux:label>Free shipping</flux:label>
    <flux:switch checked />
</flux:field>

With a description

Order notifications

An SMS at every shipping step

<flux:switch label="Order notifications" description="An SMS at every shipping step" checked />

align="left" (or start) puts the control on the leading edge instead of the trailing one.

Right (default)

Left

<div class="space-y-4">
    <flux:switch label="Right (default)" checked />
    <flux:switch label="Left" align="left" checked />
</div>

Gift wrapping

Unavailable for this seller

<flux:switch label="Gift wrapping" description="Unavailable for this seller" disabled />

Prop	Description
label	Label beside the switch.
description	Smaller text under the label.
checked	On state for a plain form.
align	Options: `right`, `left`. Default: `right`.
disabled	Disables the control.
name	Submitted field name.
wire:model	Binds to a Livewire property.