On this page

Angular Checkbox & Radio 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

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

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

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

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

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

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

Switch size

Default switch checkbox input

Large switch checkbox input

Extra large switch checkbox input

Switches in forms

FormGroup value: { "checkInCtrl": true }

Switch Example

checkIn value: true

Template form: { "checkInTmpl": true }

Layout

Default (stacked)

Default checkbox

Disabled checkbox

Default radio

Second radio

Disabled radio

Inline

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

3 (disabled)

Without labels

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

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

Radio toggle buttons

Radio 1Radio 2Radio 3

{ "radioToggle": "radio1" }

Outlined styles

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

Radio 1 Radio 2 Radio3

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