Switch

Switch component allows to use forms input checkbox styled like a switch element.

Quick demo

Preview of the switch component.

Go on interactive demo for look this component in action!

Usage

Styles

sass
@use "~@iraiser/biscuit-design-components/components/switch/styles";

JavaScript

javascript
import { BDCSwitch } from '@iraiser/biscuit-design-components/components/switch';

let switch = new BDCSwitch(document.querySelector('.bdc-switch'));

HTML structure

html
<div class="bdc-switch">
    <input class="bdc-switch__input" type="checkbox">

    <div class="bdc-switch__control">
        <span class="bdc-switch__thumb"></span>
    </div>
</div>

Theming

See the "Theming" section on theme documentation for more customization options.

Theming with CSS custom properties

Set custom styles on specific element in component:

sass
@use "~@iraiser/biscuit-design-components/components/switch";

.foo-switch {
    --bdc-theme-primary: #0971b3;
}

Theming with Sass mixins

Set custom styles on specific element in component:

sass
@use "~@iraiser/biscuit-design-components/components/switch";

.foo-switch {
    @include switch.toggled-on-track-color(#0971b3);
}

See Sass mixins section for more options.

Style customization

CSS classes

CSS ClassDescription
bdc-switchMandatory.
bdc-switch--checkedStyle switch at checked status.
bdc-switch--requiredStyle switch at required status.
bdc-switch--disabledStyle switch at disabled status.
bdc-switch__inputIndicates the native input container.
bdc-switch__controlIndicates the control container.
bdc-switch__thumbIndicates the thumb container.

Sass mixins

Custom your own switch easily with the public Sass mixins.

MixinDescription
toggled-off-track-color($color)Set the track fill color when toggle is off.
toggled-on-track-color($color)Set the track fill color when toggle is on.
toggled-off-thumb-color($color)Set the thumb color when toggle is off.
toggled-on-thumb-color($color)Set the thumb color when toggle is on.

JavaScript API

Getters & Setters

Public accessors from BDCSwitch class.

AccessorTypeDescription
valuestringMethod for get & set the value.
checkedbooleanMethod for get & set the checked status.
validbooleanMethod for get & set the valid status.
requiredbooleanMethod for get & set the required status.
disabledbooleanMethod for get & set the disabled status.
Menu