Checkbox

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

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.

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

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

Imports

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

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

Inputs

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

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

Dark background

A checkbox can be placed 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 {}

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.

Checkbox in use

When checkboxes are placed below each other, the distance between two checkbox components must be 20px.

Indeterminate state

The <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; } }

Responsive behavior

Once the label next to the checkbox does not fit into one line anymore, the line breaks.

´ 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