Switch
The switch turns a setting on or off with immediate effect, like enabling notifications. For options that are submitted with a form, reach for the checkbox instead.
Usage
Add the switch class to an <input type="checkbox"> with role="switch", so it looks and announces like a toggle.
<input type="checkbox" role="switch" class="switch" id="my-switch" />
<label class="label" for="my-switch">Airplane Mode</label>Examples
Description
Pair the switch with a label and description in a horizontal field.
<div class="field field-horizontal">
<div class="field-content">
<label class="label" for="switch-focus-mode">Share across devices</label>
<p class="field-description">
Focus is shared across devices, and turns off when you leave the app.
</p>
</div>
<input type="checkbox" role="switch" class="switch" id="switch-focus-mode" />
</div>Choice card
Wrap the field in a label and the whole card toggles the switch.
<div class="field-group gap-3">
<label class="label" for="switch-share">
<div class="field field-horizontal">
<div class="field-content">
<span class="field-title">Share across devices</span>
<p class="field-description">
Focus is shared across devices, and turns off when you leave the app.
</p>
</div>
<input type="checkbox" role="switch" class="switch" id="switch-share" />
</div>
</label>
<label class="label" for="switch-notifications">
<div class="field field-horizontal">
<div class="field-content">
<span class="field-title">Enable notifications</span>
<p class="field-description">
Receive notifications when focus mode is enabled or disabled.
</p>
</div>
<input
type="checkbox"
role="switch"
class="switch"
id="switch-notifications"
checked
/>
</div>
</label>
</div>Group
Stack switches in a field set to build a settings group.
<fieldset class="field-set">
<legend class="field-legend">Notifications</legend>
<p class="field-description">Manage when you'll receive notifications.</p>
<div class="field-group">
<div class="field field-horizontal">
<div class="field-content">
<label class="label" for="switch-disputes">Disputes</label>
<p class="field-description">
Receive a notification if a payment is disputed by a customer.
</p>
</div>
<input
type="checkbox"
role="switch"
class="switch"
id="switch-disputes"
checked
/>
</div>
<div class="field field-horizontal">
<div class="field-content">
<label class="label" for="switch-fraudulent">Fraudulent payments</label>
<p class="field-description">
Receive a notification when Radar detects a fraudulent payment.
</p>
</div>
<input
type="checkbox"
role="switch"
class="switch"
id="switch-fraudulent"
checked
/>
</div>
<div class="field field-horizontal">
<div class="field-content">
<label class="label" for="switch-successful">Successful payments</label>
<p class="field-description">
Receive a notification for every payment that is processed on your
account.
</p>
</div>
<input
type="checkbox"
role="switch"
class="switch"
id="switch-successful"
/>
</div>
</div>
</fieldset>Disabled
Add disabled and the label dims with the switch.
Invalid
Set aria-invalid on the switch for the error state.
<div class="field field-horizontal">
<div class="field-content">
<label class="label" for="switch-terms">Accept terms and conditions</label>
<p class="field-description">
You must accept the terms and conditions before continuing with your
registration.
</p>
</div>
<input
type="checkbox"
role="switch"
class="switch"
id="switch-terms"
aria-invalid="true"
/>
</div>Size
Add switch-sm for a smaller size.
<div class="field-group gap-3">
<div class="field field-horizontal">
<input
type="checkbox"
role="switch"
class="switch switch-sm"
id="switch-size-sm"
/>
<label class="label" for="switch-size-sm">Small</label>
</div>
<div class="field field-horizontal">
<input
type="checkbox"
role="switch"
class="switch"
id="switch-size-default"
/>
<label class="label" for="switch-size-default">Default</label>
</div>
</div>RTL
Add dir="rtl" to any parent element, typically <html>, to render right-to-left. See the RTL guide for details.
<div id="switch-rtl-demo" class="field field-horizontal max-w-sm" dir="rtl">
<div class="field-content">
<label class="label" for="switch-rtl-share" data-i18n="label">المشاركة عبر الأجهزة</label>
<p class="field-description" data-i18n="description">يتم مشاركة التركيز عبر الأجهزة، ويتم إيقاف تشغيله عند مغادرة التطبيق.</p>
</div>
<input type="checkbox" role="switch" class="switch" id="switch-rtl-share" />
</div>
<script>
const translations = {
ar: { dir: "rtl", label: "المشاركة عبر الأجهزة", description: "يتم مشاركة التركيز عبر الأجهزة، ويتم إيقاف تشغيله عند مغادرة التطبيق." },
he: { dir: "rtl", label: "שיתוף בין מכשירים", description: "המיקוד משותף בין מכשירים, וכבה כשאתה עוזב את האפליקציה." },
en: { dir: "ltr", label: "Share across devices", description: "Focus is shared across devices, and turns off when you leave the app." },
};
window.addEventListener("message", (e) => {
const t = translations[e.data?.lang];
if (e.data?.type !== "sp-language" || !t) return;
document.getElementById("switch-rtl-demo").dir = t.dir;
document.querySelectorAll("[data-i18n]").forEach((el) => {
el.textContent = t[el.dataset.i18n];
});
});
</script>