Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

API reference

<tng-checkbox> is built on the tngCheckbox primitive. Most component consumers do not need to attach the directive directly, but it helps to know what the wrapper is forwarding under the hood.

Underlying primitive: tngCheckbox

The wrapper forwards checked, indeterminate, disabled, readonly, required, invalid, name, value, and ariaDescribedBy to a native input[type="checkbox"] that owns ARIA and state attributes.

Primitive attachment

html
<input tngCheckbox [checked]="true" [indeterminate]="false" />
Forwarded primitive surfaceNotes
checked, indeterminateDrive binary and mixed state on the native checkbox control.
disabled, readonly, requiredPreserve native form semantics while controlling interaction.
invalidFeeds error emphasis and aria-invalid through the primitive.
name, valueSupport native form submission without extra wrapper logic.
ariaDescribedByConnect helper or error copy to the internal input element.

If you need direct access to primitive state hooks such as data-state or want to render a custom checkbox box, move to Headless > Form > Checkbox.

tng-checkbox (styled component)

The component wraps the primitive in a ready-to-ship label layout, exposes Angular outputs, and implements ControlValueAccessor for form bindings.

Component attachment

html
<tng-checkbox [checked]="releaseReady" (checkedChange)="releaseReady = $event">
  Release checklist complete
</tng-checkbox>
InputTypeDefaultDetails
checkedbooleanfalseCommitted checked state when the component is used in controlled mode.
indeterminatebooleanfalseMixed presentation for parent checklist or partial-completion states.
disabled, readonly, requiredbooleanfalseForwarded to the primitive input and reflected in the rendered behavior.
invalidbooleanfalseHighlights a mandatory or failed checkbox state.
namestring | nullnullNative form submission name for checkbox groups or standalone forms.
valuestring'on'Submitted checkbox value when the control is checked.
ariaDescribedBystring | nullnullAssociates helper text or validation copy with the internal input.
SurfaceTypeNotes
checkedChangeEventEmitter<boolean>Emits the committed checked state after a user interaction.
indeterminateChangeEventEmitter<boolean>Emits whether the control is still mixed after the user interaction.
Projected label content<ng-content>Provides the visible checkbox label and accessible name.
Forms modelboolean | 'mixed'ControlValueAccessor lets tri-state flow through reactive or template-driven forms.

Reactive forms

ts
import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { TngCheckboxComponent } from '@tailng-ui/components';

@Component({
  selector: 'app-release-checklist',
  standalone: true,
  imports: [ReactiveFormsModule, TngCheckboxComponent],
  templateUrl: './release-checklist.component.html',
})
export class ReleaseChecklistComponent {
  readonly form = new FormGroup({
    releaseReady: new FormControl<boolean | 'mixed'>(false, { nonNullable: true }),
  });
}

<form [formGroup]="form">
  <tng-checkbox formControlName="releaseReady">
    Release checklist complete
  </tng-checkbox>
</form>

Angular Signal Forms can bind the component directly with [formField]. The tri-state value still flows as boolean | 'mixed'.

Signal forms

ts
import { Component, signal } from '@angular/core';
import { FormField, form } from '@angular/forms/signals';
import { TngCheckboxComponent } from '@tailng-ui/components';

@Component({
  selector: 'app-release-checklist-signal-form',
  standalone: true,
  imports: [FormField, TngCheckboxComponent],
  template: \`
    <tng-checkbox [formField]="releaseForm.releaseReady">
      Release checklist complete
    </tng-checkbox>
  \`,
})
export class ReleaseChecklistSignalFormComponent {
  readonly releaseModel = signal<{ releaseReady: boolean | 'mixed' }>({
    releaseReady: false,
  });
  readonly releaseForm = form(this.releaseModel);
}