Switch

Activate feature flags and settings with Bootstrap's native form-switch control.

Enable notifications

Usage

Use .form-switch for a single setting that can be on or off and takes effect like a mode, preference, or feature flag. Render it as a native checkbox with role="switch", keep the visible label tied to the input, and store the checked state on the native control.

Use .field when the switch needs supporting copy, grouping, disabled state, or validation. The label should name the setting, while the description explains the consequence of turning it on or off; avoid writing a switch label as a question that becomes confusing in both states.

Switches inherit the Bootstrap checks/radios contract through .form-check and .form-switch. Use disabled and invalid states on the input itself, and group related switches in a fieldset when they answer one larger settings question.

Switch

{"title": "Moo UI Switch - Description", "description": "Add supporting copy below the label with description.", "html": "<div class=\"moo-ui\" data-bs-theme=\"light\">\n<fieldset class=\"field-fieldset\">\n  <legend class=\"field-legend\">Focus sharing</legend>\n  <div class=\"field-description form-text\">Configure how focus mode follows you across devices.</div>\n  <div class=\"field-group\">\n    <div class=\"field field--switch\">\n      <div>\n        <label class=\"form-label\" id=\"switch-description-label\" for=\"switch-description\">Share across devices</label>\n        <div class=\"field-description form-text\" id=\"switch-description-description\">Focus is shared across devices, and turns off when you leave the app.</div>\n      </div>\n      <label class=\"form-check form-switch\">\n        <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\" id=\"switch-description\" aria-labelledby=\"switch-description-label\" aria-describedby=\"switch-description-description\">\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>", "html_pre_processor": "none", "css": "", "css_pre_processor": "none", "css_starter": "neither", "css_external": "https://unpkg.com/@wpmoo/ui@1.3.0/dist/assets/css/moo-ui.css;https://ui.wpmoo.org/assets/css/codepen-demo.css", "js": "", "js_pre_processor": "none", "js_external": "https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js;https://ui.wpmoo.org/assets/js/codepen-demo.js", "tags": ["moo-ui", "switch", "components"], "editors": "110", "js_module": false}

Focus sharing

Configure how focus mode follows you across devices.

Share across devices

Focus is shared across devices, and turns off when you leave the app.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<fieldset class="field-fieldset">
  <legend class="field-legend">Focus sharing</legend>
  <div class="field-description form-text">Configure how focus mode follows you across devices.</div>
  <div class="field-group">
    <div class="field field--switch">
      <div>
        <label class="form-label" id="switch-description-label" for="switch-description">Share across devices</label>
        <div class="field-description form-text" id="switch-description-description">Focus is shared across devices, and turns off when you leave the app.</div>
      </div>
      <label class="form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch" id="switch-description" aria-labelledby="switch-description-label" aria-describedby="switch-description-description">
      </label>
    </div>
  </div>
</fieldset>

Switch

{"title": "Moo UI Switch - Disabled", "description": "Disabled switches lower opacity and drop pointer interaction in both states.", "html": "<div class=\"moo-ui\" data-bs-theme=\"light\">\n<fieldset class=\"field-fieldset\">\n  <legend class=\"field-legend\">Authentication policy</legend>\n  <div class=\"field-description form-text\">Disabled switches show unavailable settings without changing layout.</div>\n  <div class=\"field-group\">\n    <div class=\"field field--switch field--disabled\">\n      <div>\n        <label class=\"form-label\" id=\"switch-disabled-label\" for=\"switch-disabled\">Force MFA at login</label>\n      </div>\n      <label class=\"form-check form-switch\">\n        <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\" id=\"switch-disabled\" disabled aria-labelledby=\"switch-disabled-label\">\n      </label>\n    </div>\n    <div class=\"field field--switch field--disabled\">\n      <div>\n        <label class=\"form-label\" id=\"switch-disabled-checked-label\" for=\"switch-disabled-checked\">Force MFA at login</label>\n      </div>\n      <label class=\"form-check form-switch\">\n        <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\" id=\"switch-disabled-checked\" checked disabled aria-labelledby=\"switch-disabled-checked-label\">\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>", "html_pre_processor": "none", "css": "", "css_pre_processor": "none", "css_starter": "neither", "css_external": "https://unpkg.com/@wpmoo/ui@1.3.0/dist/assets/css/moo-ui.css;https://ui.wpmoo.org/assets/css/codepen-demo.css", "js": "", "js_pre_processor": "none", "js_external": "https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js;https://ui.wpmoo.org/assets/js/codepen-demo.js", "tags": ["moo-ui", "switch", "components"], "editors": "110", "js_module": false}

Authentication policy

Disabled switches show unavailable settings without changing layout.

Force MFA at login

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<fieldset class="field-fieldset">
  <legend class="field-legend">Authentication policy</legend>
  <div class="field-description form-text">Disabled switches show unavailable settings without changing layout.</div>
  <div class="field-group">
    <div class="field field--switch field--disabled">
      <div>
        <label class="form-label" id="switch-disabled-label" for="switch-disabled">Force MFA at login</label>
      </div>
      <label class="form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch" id="switch-disabled" disabled aria-labelledby="switch-disabled-label">
      </label>
    </div>
    <div class="field field--switch field--disabled">
      <div>
        <label class="form-label" id="switch-disabled-checked-label" for="switch-disabled-checked">Force MFA at login</label>
      </div>
      <label class="form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch" id="switch-disabled-checked" checked disabled aria-labelledby="switch-disabled-checked-label">
      </label>
    </div>
  </div>
</fieldset>

Switch

{"title": "Moo UI Switch - Invalid", "description": "Set invalid=true to pair with a form's validation state.", "html": "<div class=\"moo-ui\" data-bs-theme=\"light\">\n<fieldset class=\"field-fieldset\">\n  <legend class=\"field-legend\">Terms acceptance</legend>\n  <div class=\"field-description form-text\">Use the same description layout when a switch needs validation feedback.</div>\n  <div class=\"field-group\">\n    <div class=\"field field--switch\" data-invalid=\"true\">\n      <div>\n        <label class=\"form-label\" id=\"switch-invalid-label\" for=\"switch-invalid\">Accept terms and conditions</label>\n        <div class=\"field-description form-text\" id=\"switch-invalid-description\">You must accept the terms and conditions to continue.</div>\n      </div>\n      <label class=\"form-check form-switch\">\n        <input class=\"form-check-input is-invalid\" type=\"checkbox\" role=\"switch\" id=\"switch-invalid\" aria-labelledby=\"switch-invalid-label\" aria-invalid=\"true\" aria-describedby=\"switch-invalid-description\">\n      </label>\n    </div>\n  </div>\n</fieldset>\n</div>", "html_pre_processor": "none", "css": "", "css_pre_processor": "none", "css_starter": "neither", "css_external": "https://unpkg.com/@wpmoo/ui@1.3.0/dist/assets/css/moo-ui.css;https://ui.wpmoo.org/assets/css/codepen-demo.css", "js": "", "js_pre_processor": "none", "js_external": "https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js;https://ui.wpmoo.org/assets/js/codepen-demo.js", "tags": ["moo-ui", "switch", "components"], "editors": "110", "js_module": false}

Terms acceptance

Use the same description layout when a switch needs validation feedback.

Accept terms and conditions

You must accept the terms and conditions to continue.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<fieldset class="field-fieldset">
  <legend class="field-legend">Terms acceptance</legend>
  <div class="field-description form-text">Use the same description layout when a switch needs validation feedback.</div>
  <div class="field-group">
    <div class="field field--switch" data-invalid="true">
      <div>
        <label class="form-label" id="switch-invalid-label" for="switch-invalid">Accept terms and conditions</label>
        <div class="field-description form-text" id="switch-invalid-description">You must accept the terms and conditions to continue.</div>
      </div>
      <label class="form-check form-switch">
        <input class="form-check-input is-invalid" type="checkbox" role="switch" id="switch-invalid" aria-labelledby="switch-invalid-label" aria-invalid="true" aria-describedby="switch-invalid-description">
      </label>
    </div>
  </div>
</fieldset>

تفضيلات الإشعارات

اختر كيفية عمل الإشعارات والمزامنة.

المزامنة في الخلفية

حافظ على مزامنة بيانات الفريق عبر جميع الأجهزة بعد إعادة الاتصال بالشبكة.

تفعيل الإشعارات

يمكنك تفعيل أو إلغاء تفعيل الإشعارات في أي وقت.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26<div dir="rtl">
  <fieldset class="field-fieldset">
    <legend class="field-legend">تفضيلات الإشعارات</legend>
    <div class="field-description form-text">اختر كيفية عمل الإشعارات والمزامنة.</div>
    <div class="field-group">
      <div class="field field--switch">
        <div>
          <label class="form-label" id="switch-rtl-arabic-sync-label" for="switch-rtl-arabic-sync">المزامنة في الخلفية</label>
          <div class="field-description form-text" id="switch-rtl-arabic-sync-description">حافظ على مزامنة بيانات الفريق عبر جميع الأجهزة بعد إعادة الاتصال بالشبكة.</div>
        </div>
        <label class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="switch-rtl-arabic-sync" checked aria-labelledby="switch-rtl-arabic-sync-label" aria-describedby="switch-rtl-arabic-sync-description">
        </label>
      </div>
      <div class="field field--switch">
        <div>
          <label class="form-label" id="switch-rtl-arabic-notify-label" for="switch-rtl-arabic-notify">تفعيل الإشعارات</label>
          <div class="field-description form-text" id="switch-rtl-arabic-notify-description">يمكنك تفعيل أو إلغاء تفعيل الإشعارات في أي وقت.</div>
        </div>
        <label class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="switch-rtl-arabic-notify" aria-labelledby="switch-rtl-arabic-notify-label" aria-describedby="switch-rtl-arabic-notify-description">
        </label>
      </div>
    </div>
  </fieldset>
</div>

העדפות התראות

בחר כיצד התראות וסנכרון יפעלו.

סנכרון רקע

שמור על נתוני הצוות מסונכרנים בכל המכשירים לאחר חיבור מחדש לרשת.

הפעלת התראות

ניתן להפעיל או לבטל התראות בכל עת.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26<div dir="rtl">
  <fieldset class="field-fieldset">
    <legend class="field-legend">העדפות התראות</legend>
    <div class="field-description form-text">בחר כיצד התראות וסנכרון יפעלו.</div>
    <div class="field-group">
      <div class="field field--switch">
        <div>
          <label class="form-label" id="switch-rtl-hebrew-sync-label" for="switch-rtl-hebrew-sync">סנכרון רקע</label>
          <div class="field-description form-text" id="switch-rtl-hebrew-sync-description">שמור על נתוני הצוות מסונכרנים בכל המכשירים לאחר חיבור מחדש לרשת.</div>
        </div>
        <label class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="switch-rtl-hebrew-sync" checked aria-labelledby="switch-rtl-hebrew-sync-label" aria-describedby="switch-rtl-hebrew-sync-description">
        </label>
      </div>
      <div class="field field--switch">
        <div>
          <label class="form-label" id="switch-rtl-hebrew-notify-label" for="switch-rtl-hebrew-notify">הפעלת התראות</label>
          <div class="field-description form-text" id="switch-rtl-hebrew-notify-description">ניתן להפעיל או לבטל התראות בכל עת.</div>
        </div>
        <label class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="switch-rtl-hebrew-notify" aria-labelledby="switch-rtl-hebrew-notify-label" aria-describedby="switch-rtl-hebrew-notify-description">
        </label>
      </div>
    </div>
  </fieldset>
</div>

Notification preferences

Choose how notifications and sync should behave.

Background sync

Keep team data synchronized across all devices after a network reconnect.

Enable notifications

You can enable or disable notifications at any time.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26<div dir="ltr">
  <fieldset class="field-fieldset">
    <legend class="field-legend">Notification preferences</legend>
    <div class="field-description form-text">Choose how notifications and sync should behave.</div>
    <div class="field-group">
      <div class="field field--switch">
        <div>
          <label class="form-label" id="switch-rtl-english-sync-label" for="switch-rtl-english-sync">Background sync</label>
          <div class="field-description form-text" id="switch-rtl-english-sync-description">Keep team data synchronized across all devices after a network reconnect.</div>
        </div>
        <label class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="switch-rtl-english-sync" checked aria-labelledby="switch-rtl-english-sync-label" aria-describedby="switch-rtl-english-sync-description">
        </label>
      </div>
      <div class="field field--switch">
        <div>
          <label class="form-label" id="switch-rtl-english-notify-label" for="switch-rtl-english-notify">Enable notifications</label>
          <div class="field-description form-text" id="switch-rtl-english-notify-description">You can enable or disable notifications at any time.</div>
        </div>
        <label class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="switch-rtl-english-notify" aria-labelledby="switch-rtl-english-notify-label" aria-describedby="switch-rtl-english-notify-description">
        </label>
      </div>
    </div>
  </fieldset>
</div>

Component reference

Status: Accepted
Runtime: native HTML/CSS
Markup: Bootstrap/native HTML
Reference: For Bootstrap's source behavior and the shared form-check family, see the Bootstrap Checks and radios documentation.

Switch

Usage

Description

Disabled

Invalid

RTL

Component reference

Settings

Usage

Description

Disabled

Invalid

RTL

Component reference

Search documentation

Settings