✨ Welcome Summer Sale! Get all templates for $79 (40% Off) ✨
Cruip CSS

Switch

Effective on March 1st, 2023, Cruip CSS templates are no longer distributed, maintained or supported.

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

ClassDescription
.form-switchRequired to make a switch button fit the template style

React props

PropTypeDefaultAccepted values
namestring
valuestring
rightLabelstringundefined
disabledbooleanfalse
checkedbooleanfalse
requiredbooleanfalse

Vue props

PropTypeDefaultAccepted values
namestring
valuestring
righ-labelstringundefined
disabledbooleanfalse
checkedbooleanfalse
requiredbooleanfalse

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 August 17, 2021