Switch
A control that allows the user to toggle between checked and not checked.
<div role="group" class="field flex-row items-center justify-between">
<label for="airplane-mode">Airplane Mode</label>
<input type="checkbox" id="airplane-mode" role="switch" class="input">
</div>Usage
Add role="switch" and the input class to a native <input type="checkbox">. Use a native <label> or aria-label for accessible naming.
<input type="checkbox" role="switch" class="input">Checked state
Use native HTML state. Add checked for an initially enabled switch, or read and update the element's checked property in JavaScript.
<input type="checkbox" role="switch" class="input" checked>Invalid state
Set aria-invalid="true" on the switch and, when using field, set data-invalid="true" on the field wrapper.
Choose whether marketing emails are enabled.
<div role="group" class="field flex-row items-start justify-between gap-3" data-invalid="true">
<div class="grid gap-1.5">
<label for="switch-invalid-state">Marketing emails</label>
<p class="field-error">Choose whether marketing emails are enabled.</p>
</div>
<input type="checkbox" id="switch-invalid-state" role="switch" class="input" aria-invalid="true">
</div>Examples
Basic
<div role="group" class="field flex-row items-center justify-between">
<label for="switch-basic">Airplane Mode</label>
<input type="checkbox" id="switch-basic" role="switch" class="input">
</div>Description
Receive emails about new products, features, and more.
<div role="group" class="field flex-row items-start justify-between gap-3">
<div class="grid gap-1.5">
<label for="switch-description">Marketing emails</label>
<p id="switch-description-text" class="field-description">Receive emails about new products, features, and more.</p>
</div>
<input type="checkbox" id="switch-description" role="switch" class="input" aria-describedby="switch-description-text" checked>
</div>Choice Card
Wrap a .field in a native <label> when the whole card should toggle the switch.
<label class="w-full max-w-md">
<div role="group" class="field flex-row items-center justify-between">
<div class="grid gap-1.5">
<span>Marketing emails</span>
<span class="field-description">Receive emails about new products, features, and more.</span>
</div>
<input type="checkbox" role="switch" class="input" checked>
</div>
</label>Disabled
<div role="group" class="field flex-row items-center justify-between" data-disabled="true">
<label for="switch-disabled">Airplane Mode</label>
<input type="checkbox" id="switch-disabled" role="switch" class="input" disabled>
</div>Invalid
Choose whether marketing emails are enabled.
<div role="group" class="field flex-row items-start justify-between gap-3" data-invalid="true">
<div class="grid gap-1.5">
<label for="switch-invalid">Marketing emails</label>
<p class="field-error">Choose whether marketing emails are enabled.</p>
</div>
<input type="checkbox" id="switch-invalid" role="switch" class="input" aria-invalid="true">
</div>Size
<div class="grid gap-4">
<div role="group" class="field flex-row items-center justify-between">
<label for="switch-size-default">Default</label>
<input type="checkbox" id="switch-size-default" role="switch" class="input" checked>
</div>
<div role="group" class="field flex-row items-center justify-between">
<label for="switch-size-sm">Small</label>
<input type="checkbox" id="switch-size-sm" role="switch" class="input" data-size="sm" checked>
</div>
</div>RTL
Switch field layout uses document direction. Set dir="rtl" on a parent to render right-to-left.
<div dir="rtl" class="field flex-row items-center justify-between">
<label for="switch-rtl">وضع الطيران</label>
<input type="checkbox" id="switch-rtl" role="switch" class="input" checked>
</div>