Skip to content
Inputs

Checkbox

A checkbox input that supports indeterminate state. Integrates with Signal Forms.

AtlCheckbox
WCAG AA0 deps

Demo

Live PreviewReact
html
<atl-checkbox [(checked)]="agreed">I agree to the terms</atl-checkbox>
<atl-checkbox [(checked)]="pre">Pre-checked</atl-checkbox>
<atl-checkbox [indeterminate]="true">Indeterminate</atl-checkbox>
<atl-checkbox [disabled]="true">Disabled</atl-checkbox>

API (Angular)

PropTypeDefaultDescription
checkedbooleanfalseControlled checked state
onCheckedChange(checked: boolean) => voidCalled when the checked state changes
indeterminatebooleanfalseShows a dash (indeterminate state)
disabledbooleanfalseDisables the checkbox
readonlybooleanfalseMakes the checkbox read-only
invalidbooleanfalseApplies invalid/error styling
requiredbooleanfalseMarks field as required
namestring''HTML name attribute for form submission

Import

ts
import { AtlCheckbox } from '@atelier-ui/angular';