Angular 'Checkbox, Radio & Switch Component

Checkbox, Radio & Switch

Create consistent cross-browser and cross-device checkboxes and radios with our Angular checkbox, radio, and switch components.

On this page

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

import { Component } from '@angular/core';
import { FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-checks-radios-checkbox',
  templateUrl: './checks-radios-checkbox.component.html',
  imports: [FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective]
})
export class ChecksRadiosCheckboxComponent {}

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

Indeterminate

Checkboxes can utilize the :indeterminate pseudo-class when manually set via indeterminate property.

import { Component } from '@angular/core';
import { FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-checks-radios-indeterminate',
  templateUrl: './checks-radios-indeterminate.component.html',
  imports: [FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective]
})
export class ChecksRadiosIndeterminateComponent {}

<c-form-check>
  <input cFormCheckInput id="checkIndeterminate" type="checkbox" [indeterminate]="true">
  <label cFormCheckLabel for="checkIndeterminate">Indeterminate checkbox</label>
</c-form-check>

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.

import { Component } from '@angular/core';
import { FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-checks-radios-disabled-checkbox',
  templateUrl: './checks-radios-disabled-checkbox.component.html',
  imports: [FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective]
})
export class ChecksRadiosDisabledCheckboxComponent {}

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

Radio button

import { Component } from '@angular/core';
import { FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-checks-radios-button',
  templateUrl: './checks-radios-button.component.html',
  imports: [FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective]
})
export class ChecksRadiosButtonComponent {}

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

Radios in forms

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-radios-in-forms',
  templateUrl: './checks-radios-in-forms.component.html',
  imports: [
    FormCheckComponent,
    FormCheckInputDirective,
    FormCheckLabelDirective,
    FormsModule,
    ReactiveFormsModule,
    JsonPipe
  ]
})
export class ChecksRadiosInFormsComponent {
  readonly radios = ['one', 'two', 'three'];

  readonly formGroup = new FormGroup({
    radioOne: new FormControl<string | null>(this.radios[0])
  });

  radioTwo: string = this.radios[1];
}

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

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.

import { Component } from '@angular/core';
import { FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-checks-radios-disabled-button',
  templateUrl: './checks-radios-disabled-button.component.html',
  imports: [FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective]
})
export class ChecksRadiosDisabledButtonComponent {}

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

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.

import { Component } from '@angular/core';
import { FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-checks-radios-switch',
  templateUrl: './checks-radios-switch.component.html',
  imports: [FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective]
})
export class ChecksRadiosSwitchComponent {}

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

Switch size

import { Component } from '@angular/core';
import { FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-checks-radios-switch-size',
  templateUrl: './checks-radios-switch-size.component.html',
  imports: [FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective]
})
export class ChecksRadiosSwitchSizeComponent {}

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

Switches in forms

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-radios-switches-in-forms',
  imports: [
    FormCheckComponent,
    FormCheckInputDirective,
    FormCheckLabelDirective,
    FormsModule,
    ReactiveFormsModule,
    JsonPipe
  ],
  templateUrl: './checks-radios-switches-in-forms.component.html'
})
export class ChecksRadiosSwitchesInFormsComponent {
  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);
    });
  }
}

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

Layout

Default (stacked)

import { Component } from '@angular/core';
import { FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-checks-radios-default-stacked',
  templateUrl: './checks-radios-default-stacked.component.html',
  imports: [FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective]
})
export class ChecksRadiosDefaultStackedComponent {}

<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-radios-default-stacked-2',
  templateUrl: './checks-radios-default-stacked-2.component.html',
  imports: [FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective]
})
export class ChecksRadiosDefaultStacked2Component {}

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

Inline

Group checkboxes or radios on the same horizontal row by adding inline boolean property to any c-form-check`.

import { Component } from '@angular/core';
import { FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-checks-radios-inline',
  templateUrl: './checks-radios-inline.component.html',
  imports: [FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective]
})
export class ChecksRadiosInlineComponent {}

<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-radios-inline-2',
  templateUrl: './checks-radios-inline-2.component.html',
  imports: [FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective]
})
export class ChecksRadiosInline2Component {}

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

Without labels

Remember to still provide some form of accessible name for assistive technologies (for instance, using aria-label).

import { Component } from '@angular/core';
import { FormCheckInputDirective } from '@coreui/angular';

@Component({
  selector: 'docs-checks-radios-without-labels',
  templateUrl: './checks-radios-without-labels.component.html',
  imports: [FormCheckInputDirective]
})
export class ChecksRadiosWithoutLabelsComponent {}

<div>
  <input cFormCheckInput id="nolabelCheck" name="nolabelCheck" type="checkbox" />
</div>
<div>
  <input cFormCheckInput id="nolabelRadio" name="nolabelRadio" type="radio" />
</div>

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

import { Component, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
import { ButtonDirective, ButtonGroupComponent, FormCheckLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-checks-radios-checkbox-toggle-buttons',
  templateUrl: './checks-radios-checkbox-toggle-buttons.component.html',
  imports: [ReactiveFormsModule, ButtonGroupComponent, FormCheckLabelDirective, ButtonDirective]
})
export class ChecksRadiosCheckboxToggleButtonsComponent {
  readonly formBuilder = inject(FormBuilder);

  readonly btnCheckGroup = this.formBuilder.group({
    checkbox1: [true],
    checkbox2: [false],
    checkbox3: [{ value: false, disabled: true }]
  });

  setValue(controlName: string) {
    const prevValue = this.btnCheckGroup.get(controlName)?.value;
    const groupValue = this.btnCheckGroup.getRawValue();
    const newGroupValue = { ...groupValue, [`${controlName}`]: !prevValue };
    this.btnCheckGroup.setValue(newGroupValue);
  }
}

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

Radio toggle buttons

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-radios-toggle-buttons',
  templateUrl: './checks-radios-toggle-buttons.component.html',
  imports: [ButtonGroupComponent, ReactiveFormsModule, JsonPipe, ButtonDirective, FormCheckLabelDirective]
})
export class ChecksRadiosToggleButtonsComponent {
  radioOptions = [
    { value: 'radio1', label: 'Radio 1' },
    { value: 'radio2', label: 'Radio 2' },
    { value: 'radio3', label: 'Radio 3', disabled: true }
  ];

  readonly btnRadioGroup = new FormGroup({
    radioToggle: new FormControl('radio1')
  });

  setRadioValue(value: string): void {
    this.btnRadioGroup.setValue({ radioToggle: value });
  }
}

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

Outlined styles

Different variants of button, such at the various outlined styles, are supported.

import { Component, inject } from '@angular/core';
import { FormBuilder, FormControl, ReactiveFormsModule } from '@angular/forms';
import { ButtonDirective, ButtonGroupComponent, FormCheckLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-checks-radios-outlined-styles',
  templateUrl: './checks-radios-outlined-styles.component.html',
  imports: [ButtonGroupComponent, ReactiveFormsModule, FormCheckLabelDirective, ButtonDirective]
})
export class ChecksRadiosOutlinedStylesComponent {
  readonly formBuilder = inject(FormBuilder);

  readonly btnRadioGroup2 = this.formBuilder.group({
    radio2: new FormControl('Radio2')
  });

  setRadioValue(value: string): void {
    this.btnRadioGroup2.setValue({ radio2: value });
  }
}

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

API reference

Form Module

c-form-check

component

jsx

import { FormCheckComponent } from '@coreui/angular'

Property	Default	Type
inline	`false`	`boolean`
Group checkboxes or radios on the same horizontal row.
reverse4.4.7+	`false`	`boolean`
Put checkboxes or radios on the opposite side.
sizing	`undefined`	`''`, `'lg'`, `'xl'`
Size the component large or extra large. Works only with `[switch]="true"`
switch	`false`	`boolean`
Render a toggle switch on for checkbox.

cFormCheckInput

directive

jsx

import { FormCheckInputDirective } from '@coreui/angular'

Property	Default	Type
indeterminate	`false`	`boolean`
Set component indeterminate state.
type	`'checkbox'`	`'checkbox'`, `'radio'`
Specifies the type of component.
valid	`undefined`	`boolean`
Set component validation state to valid.

cFormCheckLabel

directive

jsx

import { FormCheckLabelDirective } from '@coreui/angular'