✨ Get all templates and new upcoming releases for just $69. Limited time offer ✨

Switch

Cruip CSS

Toggle buttons are checkbox input based. See the example below 👇

Toggle switch

<label class="form-switch">
<input type="checkbox" name="lights">
<span class="form-switch-icon"></span>
<span>Lights</span>
</label>

For React and Vue templates we have provided a switch component to be used as in the example below.

<Switch name="lights">Lights</Switch>

<c-switch name="lights">Lights</c-switch>


Switch with left and right labels

We have also included a version with a label on the left and another on the right. We used this switch for the pricing tables 👇

Toggle switch with double labels

<label class="form-switch">
    <input type="checkbox" name="pricing-toggle" checked>
    <span class="form-switch-icon"></span>
    <span>Billed Monthly</span>
    <span>Billed Annually</span>
</label>

And here is how to use it in React and Vue 👇

<Switch name="lights" rightLabel="Billed Annually">Billed Monthly</Switch>

<c-switch name="lights" right-label="Billed Annually">Billed Monthly</c-switch>

As you may notice, when the switch component has a rightLabel (React) / right-label (Vue) prop (and that prop is not empty), the component uses the inner content as a left label and the prop value as the right label.


TL;DR

List of available HTML classes

Class Description
.form-switch Required to make a switch button fit the template style

React props

Prop Type Default Accepted values
name string
value string
rightLabel string undefined
disabled boolean false
checked boolean false
required boolean false

Vue props

Prop Type Default Accepted values
name string
value string
righ-label string undefined
disabled boolean false
checked boolean false
required boolean false

Theming

Style is defined into 3 files:

📋 Core file

src/assets/scss/core/elements/_forms.scss
👆🚫 Don’t edit this file!

📋 Settings file

src/assets/scss/settings/elements/_buttons-and-forms.scss
👆Use this to adjust Sass variables

📋 Theme file

src/assets/scss/theme/elements/_forms.scss
👆Use this to add custom CSS

Learn more about the Sass logic behind each template.
Last updated on May 25, 2021