On this page
Angular 'Checkbox, Radio & Switch Component
Create consistent cross-browser and cross-device checkboxes and radios with our Angular checkbox, radio, and switch components.
Approach
Browser default checkboxes and radios are replaced with the help ofc-form-check. Checkboxes are for selecting oneor several options in a list, while radios are for selecting one option from many.
Checkbox
<c-form-check> <input cFormCheckInput type="checkbox" /> <label cFormCheckLabel for="checkOne">Default checkbox</label></c-form-check><c-form-check> <input [checked]="true" cFormCheckInput type="checkbox" /> <label cFormCheckLabel for="checkTwo">Checked checkbox</label></c-form-check>import { Component } from '@angular/core';import { FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective } from '@coreui/angular';@Component({ selector: 'docs-checks-radios01', templateUrl: './checks-radios01.component.html', standalone: true, imports: [FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective]})export class ChecksRadios01Component {}Indeterminate
Checkboxes can utilize the:indeterminate pseudo-class when manually set viaindeterminate property.
<c-form-check> <input cFormCheckInput type="checkbox" [indeterminate]="true"> <label cFormCheckLabel for="checkIndeterminate">Indeterminate checkbox</label></c-form-check>import { Component } from '@angular/core';import { FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective } from '@coreui/angular';@Component({ selector: 'docs-checks-radios02', templateUrl: './checks-radios02.component.html', standalone: true, imports: [FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective]})export class ChecksRadios02Component {}Disabled checkbox
Add thedisabled attribute and the associatedcFormCheckLabel is automatically styled to match with a lighter colorto help indicate the input's state.
<c-form-check> <input cFormCheckInput type="checkbox" disabled> <label cFormCheckLabel for="checkThree">Disabled checkbox</label></c-form-check><c-form-check> <input cFormCheckInput type="checkbox" disabled checked> <label cFormCheckLabel for="checkFour">Disabled checked checkbox</label></c-form-check><c-form-check> <input cFormCheckInput type="checkbox" disabled indeterminate> <label cFormCheckLabel for="checkFour">Disabled indeterminate checkbox</label></c-form-check>import { Component } from '@angular/core';import { FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective } from '@coreui/angular';@Component({ selector: 'docs-checks-radios03', templateUrl: './checks-radios03.component.html', standalone: true, imports: [FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective]})export class ChecksRadios03Component {}Radio button
<c-form-check> <input cFormCheckInput type="radio" value="one" name="flexRadioDefault" /> <label cFormCheckLabel>Default radio</label></c-form-check><c-form-check> <input cFormCheckInput type="radio" value="two" name="flexRadioDefault" checked/> <label cFormCheckLabel>Checked radio</label></c-form-check>import { Component } from '@angular/core';import { FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective } from '@coreui/angular';@Component({ selector: 'docs-checks-radios04', templateUrl: './checks-radios04.component.html', standalone: true, imports: [FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective]})export class ChecksRadios04Component {}Radios in forms
Form value: { "radioOne": "one"}
Form value: { "radioTwo": "two"}
<form [formGroup]="formGroup"> @for (radio of radios; track radio) { <c-form-check> <input cFormCheckInput type="radio" [value]="radio" formControlName="radioOne" /> <label cFormCheckLabel for="radioOne-{{radio}}">{{ radio }}</label> </c-form-check> }</form><p>Form value: {{ formGroup.value | json }}</p><hr><form #templateForm="ngForm"> @for (radio of radios; track radio) { <c-form-check> <input cFormCheckInput type="radio" [value]="radio" name="radioTwo" [(ngModel)]="radioTwo" /> <label cFormCheckLabel for="radioTwo-{{radio}}">{{ radio }}</label> </c-form-check> }</form><p>Form value: {{ templateForm.value | json }}</p>import { JsonPipe } from '@angular/common';import { Component } from '@angular/core';import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';import { FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective } from '@coreui/angular';@Component({ selector: 'docs-checks-radios17', templateUrl: './checks-radios17.component.html', standalone: true, imports: [ FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormsModule, ReactiveFormsModule, JsonPipe ]})export class ChecksRadios17Component { readonly radios = ['one', 'two', 'three']; readonly formGroup = new FormGroup({ radioOne: new FormControl<string | null>(this.radios[0]) }); radioTwo: string = this.radios[1];}Disabled radio button
Add thedisabled attribute and the associatedcFormCheckLabel is automatically styled to match with a lightercolor to help indicate the input's state.
<c-form-check> <input cFormCheckInput name="flexRadioDisabled" type="radio" value="one" disabled/> <label cFormCheckLabel>Default radio</label></c-form-check><c-form-check> <input cFormCheckInput name="flexRadioDisabled" type="radio" value="two" disabled checked/> <label cFormCheckLabel>Checked radio</label></c-form-check>import { Component } from '@angular/core';import { FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective } from '@coreui/angular';@Component({ selector: 'docs-checks-radios05', templateUrl: './checks-radios05.component.html', standalone: true, imports: [FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective]})export class ChecksRadios05Component {}Switch
A switch has the markup of a custom checkbox but uses theswitch boolean properly to render a toggle switch.Switches also support thedisabled attribute.
<c-form-check [switch]="true"> <input cFormCheckInput type="checkbox" /> <label cFormCheckLabel>Default switch checkbox input</label></c-form-check><c-form-check [switch]="true"> <input cFormCheckInput checked type="checkbox" /> <label cFormCheckLabel>Checked switch checkbox input</label></c-form-check><c-form-check [switch]="true"> <input cFormCheckInput disabled type="checkbox" /> <label cFormCheckLabel>Default switch checkbox input</label></c-form-check><c-form-check [switch]="true"> <input cFormCheckInput checked disabled type="checkbox" /> <label cFormCheckLabel>Checked switch checkbox input</label></c-form-check>import { Component } from '@angular/core';import { FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective } from '@coreui/angular';@Component({ selector: 'docs-checks-radios06', templateUrl: './checks-radios06.component.html', standalone: true, imports: [FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective]})export class ChecksRadios06Component {}Switch size
<c-form-check [switch]="true"> <input cFormCheckInput type="checkbox" /> <label cFormCheckLabel>Default switch checkbox input</label></c-form-check><c-form-check sizing="lg" switch> <input cFormCheckInput type="checkbox" /> <label cFormCheckLabel>Large switch checkbox input</label></c-form-check><c-form-check sizing="xl" switch> <input cFormCheckInput checked type="checkbox" /> <label cFormCheckLabel>Extra large switch checkbox input</label></c-form-check>import { Component } from '@angular/core';import { FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective } from '@coreui/angular';@Component({ selector: 'docs-checks-radios07', templateUrl: './checks-radios07.component.html', standalone: true, imports: [FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective]})export class ChecksRadios07Component {}Switches in forms
FormGroup value: { "checkInCtrl": true}
checkIn value: true
Template form: { "checkInTmpl": true}
<form [formGroup]="formGroup"> <c-form-check sizing="xl" switch> <input cFormCheckInput formControlName="checkInCtrl" type="checkbox" /> <label cFormCheckLabel>Switch Example</label> </c-form-check></form><hr>FormGroup value: {{ formGroup.value | json }}<hr><c-form-check sizing="xl" switch> <input (change)="checkIn.set(!checkIn())" [checked]="checkIn()" cFormCheckInput type="checkbox" /> <label cFormCheckLabel>Switch Example</label></c-form-check><hr>checkIn value: {{ checkIn() }}<hr><form #templateForm="ngForm"> <c-form-check sizing="xl" switch> <input [(ngModel)]="checkIn" cFormCheckInput name="checkInTmpl" type="checkbox" /> <label cFormCheckLabel>Switch Example</label> </c-form-check></form><hr>Template form: {{ templateForm.value | json }}import { JsonPipe } from '@angular/common';import { Component, effect, signal } from '@angular/core';import { takeUntilDestroyed } from '@angular/core/rxjs-interop';import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';import { FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective } from '@coreui/angular';@Component({ selector: 'docs-checks-radios16', imports: [ FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormsModule, ReactiveFormsModule, JsonPipe ], templateUrl: './checks-radios16.component.html'})export class ChecksRadios16Component { readonly checkIn = signal(true); readonly formGroup = new FormGroup({ checkInCtrl: new FormControl({ value: true, disabled: false }) }); constructor() { setTimeout(() => { this.checkIn.set(false); }, 5000); setTimeout(() => { this.checkIn.set(true); }, 8000); effect(() => { this.formGroup.get('checkInCtrl')!.setValue(this.checkIn()); }); this.formGroup.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => { this.checkIn.set(value.checkInCtrl as boolean); }); }}Layout
Default (stacked)
<c-form-check> <input cFormCheckInput type="checkbox" /> <label cFormCheckLabel for="stackOne">Default checkbox</label></c-form-check><c-form-check> <input cFormCheckInput disabled type="checkbox" /> <label cFormCheckLabel for="stackTwo">Disabled checkbox</label></c-form-check>import { Component } from '@angular/core';import { FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective } from '@coreui/angular';@Component({ selector: 'docs-checks-radios08', templateUrl: './checks-radios08.component.html', standalone: true, imports: [FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective]})export class ChecksRadios08Component {}<c-form-check> <input cFormCheckInput checked name="radioStack" type="radio" /> <label cFormCheckLabel for="radioStack1">Default radio</label></c-form-check><c-form-check> <input cFormCheckInput name="radioStack" type="radio" /> <label cFormCheckLabel for="radioStack2">Second radio</label></c-form-check><c-form-check> <input cFormCheckInput disabled name="radioStack" type="radio" /> <label cFormCheckLabel for="radioStack3">Disabled radio</label></c-form-check>import { Component } from '@angular/core';import { FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective } from '@coreui/angular';@Component({ selector: 'docs-checks-radios09', templateUrl: './checks-radios09.component.html', standalone: true, imports: [FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective]})export class ChecksRadios09Component {}Inline
Group checkboxes or radios on the same horizontal row by addinginline boolean property to any c-form-check`.
<c-form-check [inline]="true"> <input cFormCheckInput type="checkbox" /> <label cFormCheckLabel for="inline1">1</label></c-form-check><c-form-check inline> <input cFormCheckInput type="checkbox" /> <label cFormCheckLabel for="inline2">2</label></c-form-check><c-form-check inline> <input cFormCheckInput disabled type="checkbox" /> <label cFormCheckLabel for="inline3">3 (disabled)</label></c-form-check>import { Component } from '@angular/core';import { FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective } from '@coreui/angular';@Component({ selector: 'docs-checks-radios10', templateUrl: './checks-radios10.component.html', standalone: true, imports: [FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective]})export class ChecksRadios10Component {}<c-form-check inline> <input cFormCheckInput checked name="radioinline" type="radio" /> <label cFormCheckLabel for="radioinline1">1</label></c-form-check><c-form-check inline> <input cFormCheckInput name="radioinline" type="radio" /> <label cFormCheckLabel for="radioinline2">2</label></c-form-check><c-form-check inline> <input cFormCheckInput disabled name="radioinline" type="radio" /> <label cFormCheckLabel for="radioinline3">3 (disabled)</label></c-form-check>import { Component } from '@angular/core';import { FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective } from '@coreui/angular';@Component({ selector: 'docs-checks-radios11', templateUrl: './checks-radios11.component.html', standalone: true, imports: [FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective]})export class ChecksRadios11Component {}Without labels
Remember to still provide some form of accessible name for assistive technologies (for instance, usingaria-label).
<div> <input cFormCheckInput name="nolabelCheck" type="checkbox" /></div><div> <input cFormCheckInput name="nolabelRadio" type="radio" /></div>import { Component } from '@angular/core';import { FormCheckInputDirective } from '@coreui/angular';@Component({ selector: 'docs-checks-radios12', templateUrl: './checks-radios12.component.html', standalone: true, imports: [FormCheckInputDirective]})export class ChecksRadios12Component {}Toggle buttons
Create button-like checkboxes and radio buttons by using button boolean property on thec-form-check component.These toggle buttons can further be grouped in a button group if needed.
Checkbox toggle buttons
<div [formGroup]="btnCheckGroup"> <c-button-group> <input formControlName="checkbox1" type="checkbox" /> <label (click)="setValue('checkbox1')" cButton cFormCheckLabel>Checkbox 1</label> <input formControlName="checkbox2" type="checkbox" /> <label (click)="setValue('checkbox2')" cButton cFormCheckLabel>Checkbox 2</label> <input formControlName="checkbox3" type="checkbox" /> <label (click)="setValue('checkbox3')" cButton cFormCheckLabel>Disabled 3</label> </c-button-group></div>import { Component } from '@angular/core';import { FormBuilder, ReactiveFormsModule } from '@angular/forms';import { ButtonDirective, ButtonGroupComponent, FormCheckLabelDirective } from '@coreui/angular';@Component({ selector: 'docs-checks-radios13', templateUrl: './checks-radios13.component.html', standalone: true, imports: [ReactiveFormsModule, ButtonGroupComponent, FormCheckLabelDirective, ButtonDirective]})export class ChecksRadios13Component { btnCheckGroup = this.formBuilder.group({ checkbox1: [true], checkbox2: [false], checkbox3: [{ value: false, disabled: true }] }); constructor(private formBuilder: FormBuilder) {} setValue(controlName: string) { const prevValue = this.btnCheckGroup.get(controlName)?.value; const groupValue = this.btnCheckGroup.getRawValue(); const newGroupValue = { ...groupValue, [`${controlName}`]: !prevValue }; this.btnCheckGroup.setValue(newGroupValue); }}Radio toggle buttons
{ "radioToggle": "radio1"}
<c-button-group [formGroup]="btnRadioGroup"> @for (option of radioOptions; track option.value) { <input formControlName="radioToggle" [id]="option.value" type="radio" [value]="option.value" [attr.disabled]="option.disabled" /> <label (click)="setRadioValue(option.value)" cButton cFormCheckLabel [for]="option.value" variant="ghost">{{option.label}}</label> }</c-button-group><hr>{{btnRadioGroup.value | json}}import { Component } from '@angular/core';import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';import { ButtonDirective, ButtonGroupComponent, FormCheckLabelDirective } from '@coreui/angular';import { JsonPipe } from '@angular/common';@Component({ selector: 'docs-checks-radios14', templateUrl: './checks-radios14.component.html', standalone: true, imports: [ButtonGroupComponent, ReactiveFormsModule, JsonPipe, ButtonDirective, FormCheckLabelDirective]})export class ChecksRadios14Component { radioOptions = [ { value: 'radio1', label: 'Radio 1' }, { value: 'radio2', label: 'Radio 2' }, { value: 'radio3', label: 'Radio 3', disabled: true } ]; btnRadioGroup = new FormGroup({ radioToggle: new FormControl('radio1') }); setRadioValue(value: string): void { this.btnRadioGroup.setValue({ radioToggle: value }); }}Outlined styles
Different variants of button, such at the various outlined styles, are supported.
<c-button-group [formGroup]="btnRadioGroup2"> <input formControlName="radio2" type="radio" value="Radio1" /> <label (click)="setRadioValue('Radio1')" cButton cFormCheckLabel color="danger" for="radio1-grp2" variant="outline"> Radio 1 </label> <input formControlName="radio2" type="radio" value="Radio2" /> <label (click)="setRadioValue('Radio2')" cButton cFormCheckLabel color="success" for="radio2-grp2" variant="outline"> Radio 2 </label> <input [attr.disabled]="true" formControlName="radio2" type="radio" value="Radio3" /> <label (click)="setRadioValue('Radio3')" cButton cFormCheckLabel color="secondary" for="radio3-grp2" variant="outline"> Radio3 </label></c-button-group>import { Component } from '@angular/core';import { FormBuilder, FormControl, ReactiveFormsModule } from '@angular/forms';import { ButtonDirective, ButtonGroupComponent, FormCheckLabelDirective } from '@coreui/angular';@Component({ selector: 'docs-checks-radios15', templateUrl: './checks-radios15.component.html', standalone: true, imports: [ButtonGroupComponent, ReactiveFormsModule, FormCheckLabelDirective, ButtonDirective]})export class ChecksRadios15Component { btnRadioGroup2 = this.formBuilder.group({ radio2: new FormControl('Radio2') }); constructor( private formBuilder: FormBuilder ) {} setRadioValue(value: string): void { this.btnRadioGroup2.setValue({ radio2: value }); }}API reference
Form Module
c-form-check
component
Inputs
| name | description | type | default |
|---|---|---|---|
inline | Group checkboxes or radios on the same horizontal row. | boolean | undefined |
sizing | Size the label small or large. | sm |lg | undefined |
switch | Render a toggle switch on for checkbox. | boolean | undefined |
cFormCheckInput
directive
Inputs
| name | description | type | default |
|---|---|---|---|
indeterminate | Set checkbox indeterminate state. | boolean | undefined |
type | Specifies the html type of input element. | checkbox |radio | checkbox |
valid | Set component validation state to valid. | boolean | undefined |
cFormCheckLabel
directive