Checkbox

Checkbox component allows to use forms input typed to checkbox element.

Quick demo

Preview of the checkbox component.

Go on interactive demo for look this component in action!

Usage

Styles

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

JavaScript

javascript
import { BDCCheckbox } from '@iraiser/biscuit-design-components/components/checkbox';

let checkbox = new BDCCheckbox(document.querySelector('.bdc-checkbox'));

HTML structure

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

    <div class="bdc-checkbox__control">
        <i class="bdc-checkbox__checkmark fa-check fas"></i>
    </div>

    <div class="bdc-checkbox__whisper"></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/checkbox";

.foo-checkbox {
    --bdc-theme-primary: #0971b3;
    --bdc-theme-on-primary: #fff;
}

Theming with Sass mixins

Set custom styles on specific element in component:

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

.foo-checkbox {
    @include checkbox.marked-colors(#0971b3, #0971b3);
}

See Sass mixins section for more options.

Style customization

CSS classes

CSS ClassDescription
bdc-checkboxMandatory.
bdc-checkbox--focusedStyle checkbox at focused status.
bdc-checkbox--selectedStyle checkbox at checked status.
bdc-checkbox--requiredStyle checkbox at required status.
bdc-checkbox--invalidStyle checkbox at invalid status.
bdc-checkbox--disabledStyle checkbox at disabled status.
bdc-checkbox__inputIndicates the native input container.
bdc-checkbox__controlIndicates the control container.
bdc-checkbox__checkmarkIndicates the icon container.

Sass mixins

Custom your own checkbox easily with the public Sass mixins.

MixinDescription
unmarked-colors($fill-color, $stroke-color)Set the colors when element is not marked.
marked-colors($fill-color, $stroke-color)Set the colors when element is marked.
ink-color($color)Set the icon color.
focused-color($color)Set the color when element is focused.

JavaScript API

Getters & Setters

Public accessors from BDCCheckbox 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