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 of c-form-check. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

Checkbox

Default checkbox

Checked checkbox

<c-form-check> <input cFormCheckInput id="checkOne" type="checkbox" /> <label cFormCheckLabel for="checkOne">Default checkbox</label> </c-form-check> <c-form-check> <input [checked]="true" cFormCheckInput id="checkTwo" 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 via indeterminate property.

Indeterminate checkbox

<c-form-check> <input cFormCheckInput id="checkIndeterminate" 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 the disabled attribute and the associated cFormCheckLabel is automatically styled to match with a lighter color to help indicate the input's state.

Disabled checkbox

Disabled checked checkbox

Disabled indeterminate checkbox

<c-form-check> <input cFormCheckInput id="checkThree" type="checkbox" disabled> <label cFormCheckLabel for="checkThree">Disabled checkbox</label> </c-form-check> <c-form-check> <input cFormCheckInput id="checkFour" type="checkbox" disabled checked> <label cFormCheckLabel for="checkFour">Disabled checked checkbox</label> </c-form-check> <c-form-check> <input cFormCheckInput id="checkFive" 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

Default radio

Checked radio

<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 id="radioOne-{{radio}}" 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 id="radioTwo-{{radio}}" 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 the disabled attribute and the associated cFormCheckLabel is automatically styled to match with a lighter color to help indicate the input's state.

Default radio

Checked radio

<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 the switch boolean properly to render a toggle switch. Switches also support the disabled attribute.

Default switch checkbox input

Checked switch checkbox input

Default switch checkbox input

Checked switch checkbox input

<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

Default switch checkbox input

Large switch checkbox input

Extra large switch checkbox input

<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 }

Switch Example

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)

Default checkbox

Disabled checkbox

<c-form-check> <input cFormCheckInput id="stackOne" type="checkbox" /> <label cFormCheckLabel for="stackOne">Default checkbox</label> </c-form-check> <c-form-check> <input cFormCheckInput disabled id="stackTwo" 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 {}

Default radio

Second radio

Disabled radio

<c-form-check> <input cFormCheckInput checked id="radioStack1" name="radioStack" type="radio" /> <label cFormCheckLabel for="radioStack1">Default radio</label> </c-form-check> <c-form-check> <input cFormCheckInput id="radioStack2" name="radioStack" type="radio" /> <label cFormCheckLabel for="radioStack2">Second radio</label> </c-form-check> <c-form-check> <input cFormCheckInput disabled id="radioStack3" 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 adding inline boolean property to any c-form-check`.

3 (disabled)

<c-form-check [inline]="true"> <input cFormCheckInput id="inline1" type="checkbox" /> <label cFormCheckLabel for="inline1">1</label> </c-form-check> <c-form-check inline> <input cFormCheckInput id="inline2" type="checkbox" /> <label cFormCheckLabel for="inline2">2</label> </c-form-check> <c-form-check inline> <input cFormCheckInput disabled id="inline3" 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 {}

3 (disabled)

<c-form-check inline> <input cFormCheckInput checked id="radioinline1" name="radioinline" type="radio" /> <label cFormCheckLabel for="radioinline1">1</label> </c-form-check> <c-form-check inline> <input cFormCheckInput id="radioinline2" name="radioinline" type="radio" /> <label cFormCheckLabel for="radioinline2">2</label> </c-form-check> <c-form-check inline> <input cFormCheckInput disabled id="radioinline3" 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, using aria-label).

<div> <input cFormCheckInput id="nolabelCheck" name="nolabelCheck" type="checkbox" /> </div> <div> <input cFormCheckInput id="nolabelRadio" 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 the c-form-check component. These toggle buttons can further be grouped in a button group if needed.

Checkbox toggle buttons

Checkbox 1Checkbox 2Disabled 3

<div [formGroup]="btnCheckGroup"> <c-button-group> <input class="btn-check" formControlName="checkbox1" type="checkbox" /> <label (click)="setValue('checkbox1')" cButton cFormCheckLabel>Checkbox 1</label> <input class="btn-check" formControlName="checkbox2" type="checkbox" /> <label (click)="setValue('checkbox2')" cButton cFormCheckLabel>Checkbox 2</label> <input class="btn-check" 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

Radio 1Radio 2Radio 3

{ "radioToggle": "radio1" }

<c-button-group [formGroup]="btnRadioGroup"> @for (option of radioOptions; track option.value) { <input class="btn-check" 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.

Radio 1 Radio 2 Radio3

<c-button-group [formGroup]="btnRadioGroup2"> <input class="btn-check" formControlName="radio2" id="radio1-grp2" type="radio" value="Radio1" /> <label (click)="setRadioValue('Radio1')" cButton cFormCheckLabel color="danger" for="radio1-grp2" variant="outline"> Radio 1 </label> <input class="btn-check" formControlName="radio2" id="radio2-grp2" type="radio" value="Radio2" /> <label (click)="setRadioValue('Radio2')" cButton cFormCheckLabel color="success" for="radio2-grp2" variant="outline"> Radio 2 </label> <input [attr.disabled]="true" class="btn-check" formControlName="radio2" id="radio3-grp2" 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