Checkbox
A control that allows the user to toggle between checked and not checked.
import { Component } from '@angular/core';
import {
RdxCheckboxButtonDirective,
RdxCheckboxIndicatorDirective,
RdxCheckboxInputDirective,
RdxCheckboxRootDirective
} from '@radix-ng/primitives/checkbox';
import { RdxLabelDirective } from '@radix-ng/primitives/label';
import { Check, LucideAngularModule } from 'lucide-angular';
@Component({
selector: 'radix-checkbox-demo',
imports: [
RdxLabelDirective,
RdxCheckboxRootDirective,
RdxCheckboxButtonDirective,
RdxCheckboxIndicatorDirective,
RdxCheckboxInputDirective,
LucideAngularModule
],
template: `
<div style="display: flex; align-items: center;">
<div [checked]="true" rdxCheckboxRoot>
<button class="CheckboxButton" id="r1" rdxCheckboxButton>
<lucide-angular class="CheckboxIndicator" [img]="CheckIcon" rdxCheckboxIndicator size="16" />
</button>
<input rdxCheckboxInput />
</div>
<label class="Label" rdxLabel htmlFor="r1">Accept terms and conditions.</label>
</div>
`,
styleUrl: 'checkbox-demo.css'
})
export class CheckboxDemoComponent {
readonly CheckIcon = Check;
}
:host {
button {
all: unset;
}
}
.CheckboxButton {
background-color: white;
width: 25px;
height: 25px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px var(--black-a7);
}
.CheckboxButton:hover {
background-color: var(--violet-3);
}
.CheckboxButton:focus {
box-shadow: 0 0 0 2px black;
}
.CheckboxIndicator {
align-items: center;
display: flex;
color: var(--violet-11);
}
.CheckboxIndicator[data-state='unchecked'] {
display: none;
}
.Label {
color: white;
padding-left: 15px;
font-size: 15px;
line-height: 1;
}
Features
Features
- Full keyboard navigation.
- Supports indeterminate _state.
- Can be controlled or uncontrolled.
Anatomy
<div rdxCheckboxRoot>
<button rdxCheckboxButton>
<lucide-angular rdxCheckboxIndicator name="check" />
</button>
<input rdxCheckboxInput />
</div>
API Reference
Root
RdxCheckboxRootDirective
Prop | Default | Type |
---|---|---|
checked | — | ModelSignal<CheckedState> The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange. |
value | — | InputSignal<string> The value of the checkbox. This is what is submitted with the form when the checkbox is checked. |
disabled | — | InputSignalWithTransform<boolean, BooleanInput> Whether or not the checkbox button is disabled. This prevents the user from interacting with it. |
readonly | — | InputSignalWithTransform<boolean, BooleanInput> Whether the user should be unable to tick or untick the checkbox. |
required | — | InputSignalWithTransform<boolean, BooleanInput> Whether or not the checkbox is required. |
name | — | InputSignal<undefined | string> Name of the form control. Submitted with the form as part of a name/value pair. |
form | — | InputSignal<undefined | string> Associates the control with a form element. |
Data Attribute | Value |
---|---|
[data-state] | "checked" | "unchecked" | "indeterminate" |
[data-disabled] | Present when disabled |
Button
RdxCheckboxButtonDirective
It mirrors the checkbox state via ARIA/data attributes, toggles on click, and prevents Enter activation per WAI-ARIA. In forms, it stops the button’s click from bubbling so only the hidden input emits the native event used for form/validator integration.
Data Attribute | Value |
---|---|
[data-state] | "checked" | "unchecked" | "indeterminate" |
[data-disabled] | Present when disabled |
Indicator
RdxCheckboxIndicatorDirective
Renders when the checkbox is in a checked or indeterminate state. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.
Data Attribute | Value |
---|---|
[data-state] | "checked" | "unchecked" | "indeterminate" |
[data-disabled] | Present when disabled |
Input
RdxCheckboxInputDirective
It keeps form-related attributes in sync and dispatches native click events when the “checked” attribute changes so forms, validators, and external libraries receive updates.
Accessibility
Adheres to the tri-_state Checkbox WAI-ARIA design pattern .
Keyboard Interactions
Key | Description |
---|---|
Space | Checks/unchecks the checkbox. |
Managing Checked State
This section covers how to manage the checked
state of the Checkbox.
@Component({
template: `
<button (click)="myChecked.set(true)"> Uncheck </button>
<div rdxCheckboxRoot [checked]="myChecked()">
...
</div>
`
})
export class MyCheckbox {
myChecked = signal(true);
}