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.
<dt-checkbox>Check me</dt-checkbox>
<dt-checkbox checked>Checked checkbox</dt-checkbox>
<dt-checkbox disabled>Disabled checkbox</dt-checkbox>
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.
<div dtTheme=":dark" class="dt-example-dark">
<dt-checkbox checked>Check me</dt-checkbox>
<dt-checkbox [indeterminate]="true">Indeterminate</dt-checkbox>
<dt-checkbox disabled checked>Disabled</dt-checkbox>
</div>
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.
<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>
Responsive behavior
Once the label next to the checkbox does not fit into one line anymore, the line breaks.
<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>