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

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

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

## Radio button

### Radios in forms

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

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

### Switch size

### Switches in forms

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