Checkbox

The checkbox component is used to toggle one or multiple options from a set.

´ Loading interactive demo...
<dt-checkbox>Check me</dt-checkbox> export class DefaultCheckboxExampleComponent { } Check me export class DefaultCheckboxExampleComponent { }

Checkbox on dark background

´ Loading interactive demo...
<div dtTheme=":dark" class="dark"> <dt-checkbox checked>Check me</dt-checkbox> <dt-checkbox [indeterminate]="true">Indeterminate</dt-checkbox> <dt-checkbox disabled checked>Disabled</dt-checkbox> </div> export class DarkCheckboxExample { }
Check me Indeterminate Disabled
export class DarkCheckboxExample { }

Indeterminate state

´ Loading interactive demo...
<p>indeterminate: {{_isIndeterminate()}} | checked: {{_isChecked()}}</p> <dt-checkbox [checked]="_isChecked()" [indeterminate]="_isIndeterminate()" (change)="changeAll($event)" >All</dt-checkbox> <dt-checkbox (change)="_checkbox1 = $event.checked" [checked]="_checkbox1">Checkbox 1</dt-checkbox> <dt-checkbox (change)="_checkbox2 = $event.checked" [checked]="_checkbox2">Checkbox 2</dt-checkbox> export class IndeterminateCheckboxExampleComponent { _checkbox1 = true; _checkbox2 = false; _isIndeterminate(): boolean { return this._checkbox1 !== this._checkbox2; } _isChecked(): boolean { return this._checkbox1 && this._checkbox2; } changeAll(event: DtCheckboxChange<string>): void { this._checkbox1 = event.checked; this._checkbox2 = event.checked; } }

indeterminate: {{_isIndeterminate()}} | checked: {{_isChecked()}}

All Checkbox 1 Checkbox 2
export class IndeterminateCheckboxExampleComponent { _checkbox1 = true; _checkbox2 = false; _isIndeterminate(): boolean { return this._checkbox1 !== this._checkbox2; } _isChecked(): boolean { return this._checkbox1 && this._checkbox2; } changeAll(event: DtCheckboxChange): void { this._checkbox1 = event.checked; this._checkbox2 = event.checked; } }

Multiple checkboxes

Checkboxes underneath each other

x: 20px

Checkbox

´ Loading interactive demo...
<dt-checkbox>Check me</dt-checkbox> export class DefaultCheckboxExampleComponent { } Check me export class DefaultCheckboxExampleComponent { }

<dt-checkbox> provides the same functionality as a native enhanced with styling and animations.

Options & Properties

Name Type Description
ng-content string Text will be set as the label.
@Input() checked boolean Whether or not the checkbox is checked.
@Input() id string Unique id of the element.
@Input() required boolean Whether the checkbox is required.
@Input() indeterminate boolean Whether the element is in indeterminate state also known as mixed mode.
@Input() disabled boolean Whether the element is disabled.
@Input() tabIndex number The elements tab index.
@Input() name string The elements tab index.
@Input() value <T> The value attribute of the native input element
@Input() aria-label string Takes precedence as the element's text alternative.
@Input() aria-labelledby string Is read after the element's label and field type
@Output() change DtCheckboxChange<T> Callen everytime the checkbox gets checked or uncheced

Indeterminate state

<dt-checkbox> supports an indeterminate state, similar to the native <input type="checkbox">. While the indeterminate property of the checkbox is true, it will render as indeterminate regardless of the checked value. Any interaction with the checkbox by a user (i.e., clicking) will remove the indeterminate state.

´ Loading interactive demo...
<p>indeterminate: {{_isIndeterminate()}} | checked: {{_isChecked()}}</p> <dt-checkbox [checked]="_isChecked()" [indeterminate]="_isIndeterminate()" (change)="changeAll($event)" >All</dt-checkbox> <dt-checkbox (change)="_checkbox1 = $event.checked" [checked]="_checkbox1">Checkbox 1</dt-checkbox> <dt-checkbox (change)="_checkbox2 = $event.checked" [checked]="_checkbox2">Checkbox 2</dt-checkbox> export class IndeterminateCheckboxExampleComponent { _checkbox1 = true; _checkbox2 = false; _isIndeterminate(): boolean { return this._checkbox1 !== this._checkbox2; } _isChecked(): boolean { return this._checkbox1 && this._checkbox2; } changeAll(event: DtCheckboxChange<string>): void { this._checkbox1 = event.checked; this._checkbox2 = event.checked; } }

indeterminate: {{_isIndeterminate()}} | checked: {{_isChecked()}}

All Checkbox 1 Checkbox 2
export class IndeterminateCheckboxExampleComponent { _checkbox1 = true; _checkbox2 = false; _isIndeterminate(): boolean { return this._checkbox1 !== this._checkbox2; } _isChecked(): boolean { return this._checkbox1 && this._checkbox2; } changeAll(event: DtCheckboxChange): void { this._checkbox1 = event.checked; this._checkbox2 = event.checked; } }

Angular forms <dt-checkbox> is compatible with @angular/forms and supports both FormsModule and ReactiveFormsModule.

Accessibility

The <dt-checkbox> uses an internal <input type="checkbox"> to provide an accessible experience. This internal checkbox receives focus and is automatically labelled by the text content of the <dt-checkbox> element.

Checkboxes without text or labels should be given a meaningful label via aria-label or aria-labelledby.

Dark

´ Loading interactive demo...
<div dtTheme=":dark" class="dark"> <dt-checkbox checked>Check me</dt-checkbox> <dt-checkbox [indeterminate]="true">Indeterminate</dt-checkbox> <dt-checkbox disabled checked>Disabled</dt-checkbox> </div> export class DarkCheckboxExample { }
Check me Indeterminate Disabled
export class DarkCheckboxExample { }