CoreUI Angular Logo
Framework:
  • JavaScript / Vanilla JS
  • React.js
  • Vue.js
Getting startedIntroductionSupport CoreUICustomizeSassOptionsCSS VariablesLayoutBreakpointsContainersGridColumnsGuttersFormsOverviewDate PickerPRODate Range PickerPROForm ControlSelectMulti SelectPROChecks & RadiosPassword InputPRORangeRange SliderPRORatingPROStepperPROInput GroupFloating LabelsLayoutTime PickerPROValidationComponentsAccordionAlertAvatarBadgeBreadcrumbButtonButton GroupCalendarPROCalloutCardCarouselClose buttonCollapseDropdownFooterHeaderImageList GroupLoading ButtonPROModalNavNavbarOffcanvasPaginationPlaceholderPopoverProgressSmart PaginationPROSmart TablePROSidebarSpinnerTableTabsNewToastTooltipWidgetsIconsChartsTemplatesNewAdmin & DashboardDownloadInstallationCustomizeContentMigrationv4 → v5v3 → v4Angular version


DownloadHire UsGet CoreUI PRO
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

Loading...
Loading...

Indeterminate

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

Loading...
Loading...

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.

Loading...
Loading...

Radio button

Loading...
Loading...

Radios in forms

Form value: { "radioOne": "one" }


Form value: { "radioTwo": "two" }

Loading...
Loading...

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.

Loading...
Loading...

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.

Loading...
Loading...

Switch size

Loading...
Loading...

Switches in forms


FormGroup value: { "checkInCtrl": true }

checkIn value: true

Template form: { "checkInTmpl": true }
Loading...
Loading...

Layout

Default (stacked)

Loading...
Loading...
Loading...
Loading...

Inline

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

Loading...
Loading...
Loading...
Loading...

Without labels

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

Loading...
Loading...

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

Loading...
Loading...

Radio toggle buttons


{ "radioToggle": "radio1" }
Loading...
Loading...

Outlined styles

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

Loading...
Loading...

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

  • GitHub
  • Twitter
  • Support
  • CoreUI (Vanilla)
  • CoreUI for React.js
  • CoreUI for Vue.js

CoreUI for Angular is Open Source UI Components Library for Angular.

Currently v5.5.1 Code licensed MIT , docs CC BY 3.0 .
CoreUI PRO requires a commercial license.