Switch

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.