Are you ready for Cyber ~~Monday~~ Week Deals?

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.

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. ## Checks

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

### Disabled checks Add the disabled attribute and the associated `cFormCheckLabel` is automatically styled to match with a lighter color to help indicate the input's state.

## Radios

### Disabled radios Add the `disabled` attribute and the associated `cFormCheckLabel` is automatically styled to match with a lighter color to help indicate the input's state.

## Switches 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.

## Sizes

## Layout ### Default (stacked)

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

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

### Radio toggle buttons

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

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