Style-Forge

Appearance

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.

Switch ​


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

Switch multiple (radio) ​

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>
html

Switch multiple (checkbox) ​

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>
html

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.