Overview
tng-checkbox is a standalone checkbox that implements ControlValueAccessor for Angular forms. It supports an optional label, disabled, required, and slot-based styling for the root label, input, and label text.
Quick example
Basic
<form [formGroup]="form">
<tng-checkbox formControlName="terms" label="I agree to the terms" />
<tng-checkbox formControlName="newsletter" label="Subscribe to newsletter" />
</form>
import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { TngCheckbox } from '@tailng-ui/ui/form';
@Component({
selector: 'checkbox-demo',
standalone: true,
imports: [ReactiveFormsModule, TngCheckbox],
template: `<form [formGroup]="form">
<tng-checkbox formControlName="terms" label="I agree to the terms" />
</form>`,
})
export class CheckboxDemoComponent {
form = new FormGroup({
terms: new FormControl(false, { nonNullable: true }),
});
}
Value: { "terms": false, "newsletter": false }
Features
Value: boolean
Form value is true or false.
Slot hooks
slot keys: container (label), input, label.
Forms-ready
Works with formControlName and validators (e.g. Validators.requiredTrue).