Checkbox

A control that allows the user to toggle between checked and not checked.

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