Switch

This section presents the switch element that can be used in HTML forms. Each example includes the HTML code and styling using the sf-switch class.

Disabled

Switch

Some text

<label class="sf-switch">
  <input type="checkbox" checked /> <span>Some text</span>
</label>

Switch multiple (radio)

off on

Some text

<div class="sf-switch multiple">
  <div class="sf-switch-toggle">
    <label><input name="switch_radio" type="radio" value="off" checked /><span>off</span></label>
    <label><input name="switch_radio" type="radio" value="on" /><span>on</span></label>
  </div>
  <p class="sf-switch-description">Some text</p>
</div>

Switch multiple (checkbox)

off on

Some text

<div class="sf-switch multiple">
  <div class="sf-switch-toggle">
    <label><input name="switch_checkbox" type="checkbox" value="off" /><span>off</span></label>
    <label><input name="switch_checkbox" type="checkbox" value="on" /><span>on</span></label>
  </div>
  <div class="sf-switch-description">Some text</div>
</div>

Conclusion

Using this example, you can create forms with switch elements. All elements are styled using the sf-switch class for a consistent look and feel.