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

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