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