Primitives

Checkbox

A headless ARIA checkbox for button-based boolean or mixed state. It owns semantics and state hooks, never checkmarks or visuals.

At a glance

API — qzCheckbox with [(checked)] boolean | indeterminate
Keyboard — Space via native button activation
ARIA — role checkbox and aria-checked false/true/mixed
CLI — pnpm quartz add checkbox

Playground

Checkbox

A real qzCheckbox, starting in the mixed state.

Inputs

Disabled

Events

No events yet. Interact with the preview to see them here.

Live examples

Loading demo…

Code

Basic and disabled

accepted = signal(false);

<button qzCheckbox [(checked)]="accepted">
  Accept terms
</button>

Indeterminate

state = signal<boolean | 'indeterminate'>('indeterminate');

<button qzCheckbox [(checked)]="state">
  Select all
</button>

Angular Forms

import { ReactiveFormsModule, FormControl } from '@angular/forms';
import { CheckboxDirective } from '@quartz-headless/primitives';
import { CheckboxControlDirective } from '@quartz-headless/primitives/forms';

@Component({
  imports: [ReactiveFormsModule, CheckboxDirective, CheckboxControlDirective],
  template: `<button qzCheckbox [formControl]="terms">Accept terms</button>`,
})
class Terms {
  terms = new FormControl(false, { nonNullable: true, validators: Validators.requiredTrue });
}