Checkbox Component

[muratcorlu]

Design

Figma Design Document

Implementation

React usage example:

<BlCheckbox
    label="single" 
    checked={checked} 
    indeterminate={indeterminate}
    disabled={false}
    onChange={(event) => console.log(event)} />

Indeterminate Group React usage example:

<BlCheckboxGroup label="parent">
    <BlCheckbox label="child1" />
    <BlCheckbox label="child2" />
    <BlCheckbox label="child3" />
</BlCheckboxGroup>

Rules

• Indeterminate state can be use either with single or multiple checkboxes.
• When using BlCheckboxGroup, parent checkbox will be indeterminate if all child checkboxes are not true or false.
• Styling the colors of checkbox component will be possible via bl-checkbox CSS properties. Like

<style>
.checkbox-new {
   --bl-color-primary: rebeccapurple;
}
</style>

<bl-checkbox class="checkbox-new" label="new label" />

API Reference:

bl-checkbox component

Checkbox component handles interaction to change checked/unchecked states.

Attributes

Attribute	Description	Default Value
label (string)	Label of the checkbox	-
checked (boolean)	Sets checkbox checked. By default checkbox is unchecked	false
disabled (boolean)	Sets checkbox disabled	-
indeterminate (boolean)	Sets checkbox indeterminate	-

Events

Event	Description
bl-checkbox-change	Will be triggered when checkbox clicked

bl-checkbox-group component

Container for the indeterminate checkbox groups.

Attributes

Attribute	Description	Default Value
label (string)	Label of the parent indeterminate checkbox	-

Slots

Name	Description	Default Content
default slot	bl-checkbox elements	-

Events

Event	Description
bl-checkbox-change	Will be triggered when parent checkbox state changed