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 CheckboxPureExample {} <dt-checkbox>Check me</dt-checkbox> export class CheckboxPureExample {}

States

The checkbox has a default, hover, active, focus and disabled state.

´ Loading interactive demo...
<dt-checkbox>Check me</dt-checkbox> <dt-checkbox checked>Checked checkbox</dt-checkbox> <dt-checkbox disabled>Disabled checkbox</dt-checkbox> export class CheckboxDefaultExample {} <dt-checkbox>Check me</dt-checkbox> <dt-checkbox checked>Checked checkbox</dt-checkbox> <dt-checkbox disabled>Disabled checkbox</dt-checkbox> export class CheckboxDefaultExample {}

Variants

Checkboxes 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 CheckboxDarkExample {} <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 CheckboxDarkExample {}

Behavior

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 CheckboxIndeterminateExample { _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; } } <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 CheckboxIndeterminateExample { _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; } }

Responsive behavior

´ Loading interactive demo...
<dt-checkbox> Check this checkbox to subscribe to our product news newsletter and other updates. We'll send updates once a month and promise we won't spam you. </dt-checkbox> <dt-checkbox> This website uses performance, functionality and targeting cookies. If you check this checkbox, you consent to the use of cookies. </dt-checkbox> export class CheckboxResponsiveExample {} // tslint:enable:max-line-length <dt-checkbox> Check this checkbox to subscribe to our product news newsletter and other updates. We'll send updates once a month and promise we won't spam you. </dt-checkbox> <dt-checkbox> This website uses performance, functionality and targeting cookies. If you check this checkbox, you consent to the use of cookies. </dt-checkbox> export class CheckboxResponsiveExample {} // tslint:enable:max-line-length

Checkboxes in use

Checkboxes underneath each other
x: 20px

The <dt-checkbox> provides the same functionality as a native checkbox enhanced with styling and animations. You can set the label as the ng-content of the <dt-checkbox> component.

Imports

You have to import the DtCheckboxModule when you want to use the dt-checkbox:

@NgModule({
  imports: [DtCheckboxModule],
})
class MyModule {}

Inputs

Name Type Description
checked boolean Whether or not the checkbox is checked.
id string Unique id of the element.
required boolean Whether the checkbox is required.
indeterminate boolean Whether the element is in indeterminate state also known as mixed mode.
disabled boolean Whether the element is disabled.
tabIndex number The elements tab index.
name string The elements tab index.
value <T> The value attribute of the native input element.
aria-label string Takes precedence as the element's text alternative.
aria-labelledby string Is read after the element's label and field type.

Outputs

Name Type Description
change DtCheckboxChange<T> Called everytime the checkbox gets checked or unchecked.

Methods

Name Description Return value
focus() Focuses the checkbox. void
toggle() Toggles the checkbox's state between checked and unchecked programmatically. void

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 CheckboxIndeterminateExample { _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; } } <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 CheckboxIndeterminateExample { _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; } }

The <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.

Examples

Default

´ Loading interactive demo...
<dt-checkbox>Check me</dt-checkbox> <dt-checkbox checked>Checked checkbox</dt-checkbox> <dt-checkbox disabled>Disabled checkbox</dt-checkbox> export class CheckboxDefaultExample {} <dt-checkbox>Check me</dt-checkbox> <dt-checkbox checked>Checked checkbox</dt-checkbox> <dt-checkbox disabled>Disabled checkbox</dt-checkbox> export class CheckboxDefaultExample {}

Responsive

´ Loading interactive demo...
<dt-checkbox> Check this checkbox to subscribe to our product news newsletter and other updates. We'll send updates once a month and promise we won't spam you. </dt-checkbox> <dt-checkbox> This website uses performance, functionality and targeting cookies. If you check this checkbox, you consent to the use of cookies. </dt-checkbox> export class CheckboxResponsiveExample {} // tslint:enable:max-line-length <dt-checkbox> Check this checkbox to subscribe to our product news newsletter and other updates. We'll send updates once a month and promise we won't spam you. </dt-checkbox> <dt-checkbox> This website uses performance, functionality and targeting cookies. If you check this checkbox, you consent to the use of cookies. </dt-checkbox> export class CheckboxResponsiveExample {} // tslint:enable:max-line-length

Dark theme

´ 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 CheckboxDarkExample {} <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 CheckboxDarkExample {}