Checkbox

Boolean checkbox component. Works with ngModel, formControl, and formControlName.

Keyboard: Space to toggle. ARIA: role="checkbox", aria-checked, aria-disabled.

$ npm install @bloc-ui/core

Sizes

Small

Tight layouts, table cells, or dense form rows.

Accept terms

Medium (default)

Standard form controls and most UI contexts.

Accept terms

Large

Touch targets, prominent CTAs, or accessibility-first interfaces.

Accept terms

States

Default (unchecked)

Uncontrolled — click to toggle.

Remember me

Default (checked)

Starts checked — uncontrolled.

Pre-checked

Disabled (unchecked)

Non-interactive via [disabled].

Unavailable

Disabled (checked)

Checked + disabled via FormControl.disable().

Locked on

Inline label

Label after (default)

Label appears after the checkbox (labelPosition="after").

Enable notifications

Subscribe to newsletter

Label before

Label appears before the checkbox (labelPosition="before").

Enable notifications

Subscribe to newsletter

Template-driven (ngModel)

Two-way binding

Bound via [(ngModel)].

Unchecked

ngModel value: false

Reactive forms

FormControl

Bound via [formControl].

Not agreed

value: false | touched: false

setDisabledState

Enable/disable the control from code.

Form-disabled

Custom token

Override colours via CSS custom properties.

Blue checkbox