Switch

This part of the documentation relates to premium templates built with Cruip CSS framework only. If the template you are using is built on the top of Tailwind CSS, please refer to the last part of the documentation.

General information

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

<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 examples below.

React
Vue
React
<Switch name="lights">Lights</Switch>
Vue
<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 👇

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

React
Vue
React
<Switch name="lights" rightLabel="Billed Annually">Billed Monthly</Switch>
Vue
<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 checkbox looks like a toggle switch

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

-

-

right-label

string

-

-

disabled

boolean

false

-

checked

boolean

false

-

required

boolean

false

-

true-value

boolean

true

-

false-value

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.