Skip to main content

Checkbox

A custom checkbox web component for BIM applications. HTML tag: bim-checkbox

Fires​

change - Fired when the checkbox changes.

Extends​

  • LitElement

Implements​

Properties​

checked​

checked: boolean = false

Indicates whether the checkbox is checked or not. This property reflects the checked state of the internal <input> element and can be used to set or get the checkbox's state. Changing this property dynamically updates the checkbox's visual state and its checked attribute.

Default​

false

Examples​

<bim-checkbox checked></bim-checkbox>
const checkbox = document.createElement('bim-checkbox');
checkbox.checked = true;
document.body.appendChild(checkbox);

disabled​

disabled: boolean = false

Disables the checkbox, preventing user interaction. When disabled, the checkbox is visually dimmed and ignores all pointer and keyboard events.

Default​

false

Example​

<bim-checkbox disabled></bim-checkbox>

icon?​

optional icon: string

Represents the icon associated with the checkbox label. This icon is displayed next to the label text if provided. Changing this property dynamically updates the displayed icon if the label is present. It is used to visually enhance the checkbox by adding an icon.

Default​

undefined

Examples​

<bim-checkbox icon="check"></bim-checkbox>
const checkbox = document.createElement('bim-checkbox');
checkbox.icon = 'check';
document.body.appendChild(checkbox);

indeterminate​

indeterminate: boolean = false

Indicates whether the checkbox is in an indeterminate (mixed) state. Typically used when a checkbox represents a group where some but not all items are checked. Cleared automatically when the user interacts with the checkbox.

Default​

false

Example​

<bim-checkbox indeterminate></bim-checkbox>

inverted​

inverted: boolean = false

Indicates whether the checkbox is displayed with an inverted disposition.

Default​

false

Examples​

<bim-checkbox inverted></bim-checkbox>
const checkbox = document.createElement('bim-checkbox');
checkbox.inverted = true;
document.body.appendChild(checkbox);

label?​

optional label: string

The label text associated with the checkbox. This text is displayed next to the checkbox itself. Changing this property dynamically updates the displayed label. If an icon is also specified, it will be displayed alongside this label.

Default​

undefined

Examples​

<bim-checkbox label="Accept Terms"></bim-checkbox>
const checkbox = document.createElement('bim-checkbox');
checkbox.label = 'Accept Terms';
document.body.appendChild(checkbox);

name?​

optional name: string

The name attribute of the checkbox. It can be used to identify the checkbox when submitting a form or to reference the checkbox in JavaScript. Changing this property dynamically updates the name attribute of the internal <input> element.

Default​

undefined

Examples​

<bim-checkbox name="agreement"></bim-checkbox>
const checkbox = document.createElement('bim-checkbox');
checkbox.name = 'agreement';
document.body.appendChild(checkbox);

onValueChange​

readonly onValueChange: Event

Deprecated​

Use addEventListener("change", fn) instead.

Implementation of​

HasValue . onValueChange

styles​

static styles: CSSResult

CSS styles for the component.

Overrides​

LitElement.styles

Accessors​

value​

get value(): boolean

A getter that returns the current checked state of the checkbox. This is useful for retrieving the checkbox's value in form submissions or JavaScript interactions as it provides a consistent value property as many other components.

Default​

false

Examples​

<script>console.log(document.querySelector('bim-checkbox').value);</script>
const checkbox = document.createElement('bim-checkbox');
document.body.appendChild(checkbox);
console.log(checkbox.value); // false initially

Returns​

boolean