Checkbox

<tng-checkbox> is the component-layer checkbox for binary and mixed selection flows. It keeps the checkbox UI ready to ship, forwards state through Angular outputs and forms, and lets you restyle it by overriding semantic tokens on the host.

If you need total DOM ownership, state-specific box rendering, or bespoke animation inside the control itself, move down to Headless > Form > Checkbox or use the ownable install.

import { TngCheckboxComponent } from '@tailng-ui/components';

Usage patterns

Start with projected label content and bind to checkedChange when the parent owns the selected state.

<tng-checkbox [checked]="releaseReady" (checkedChange)="releaseReady = $event">
  Release checklist complete
</tng-checkbox>

Mixed state is still first-class at the component layer, so parent checklists can surface partial completion without dropping into the primitive API.

<tng-checkbox [indeterminate]="true">
  Deployment approvals pending
</tng-checkbox>

Accessibility baseline

• Projected content becomes the visible label and accessible name.
• Mixed state resolves to aria-checked="mixed" automatically.
• Readonly stays focusable, but user toggles are reverted before state is committed.
• For product-specific visuals inside the checkbox box itself, use the headless or ownable surfaces instead of relying on undocumented internal markup.