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