Checkbox

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

 import { Component } from '@angular/core';
 
import {
    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',
    standalone: true,
    imports: [
        RdxLabelDirective,
        RdxCheckboxRootDirective,
        RdxCheckboxIndicatorDirective,
        RdxCheckboxInputDirective,
        LucideAngularModule
    ],
    template: `
        <div style="display: flex; align-items: center;">
            <button class="CheckboxRoot" rdxCheckboxRoot>
                <lucide-angular class="CheckboxIndicator" [img]="CheckIcon" rdxCheckboxIndicator size="16" />
                <input id="r1" rdxCheckboxInput type="checkbox" />
            </button>
            <label class="Label" rdxLabel htmlFor="r1">Check Item</label>
        </div>
    `,
    styleUrl: 'checkbox-demo.css'
})
export class CheckboxDemoComponent {
    readonly CheckIcon = Check;
}

 :host {
    button {
        all: unset;
    }
}
 
.CheckboxRoot {
    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);
}
 
.CheckboxRoot:hover {
    background-color: var(--violet-3);
}
 
.CheckboxRoot: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

 <button rdxCheckboxRoot [(checked)]="checked">
  <lucide-angular rdxCheckboxIndicator name="check" />
  <input rdxCheckboxInput type="checkbox" />
</button>

API Reference

Root

RdxCheckboxDirective

Prop	Default	Type

Data Attribute	Value
`[data-state]`	`"checked" \| "unchecked" \| "indeterminate"`
`[data-disabled]`	`Present when disabled`

Indicator

RdxCheckboxIndicator

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

RdxCheckboxInput

Accessibility

Adheres to the tri-_state Checkbox WAI-ARIA design pattern .

Keyboard Interactions

Key	Description
`Space`	Checks/unchecks the checkbox.