#### Elevate Your Design with CoreUI PRO!

Unlock a world of possibilities: More themes, enhanced components (Date Picker, Multi Select, and more), and priority support.

Checkbox
Default checkbox
Checked checkbox
Indeterminate

Checkboxes can utilize the `:indeterminate` pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).

Indeterminate checkbox
Checkbox Disabled

Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.

Disabled checkbox
Disabled checked checkbox
Radios
Default radio
Default checked radio
Radios Disabled

Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.

Disabled radio
Disabled checked radio
Switches

A switch has the markup of a custom checkbox but uses the `.form-switch` class to render a toggle switch. Switches also support the `disabled` attribute.

Default switch checkbox input
Checked switch checkbox input
Disabled switch checkbox input
Disabled checked switch checkbox input
Switches Sizes
Default switch checkbox input
Large switch checkbox input
Extra large switch checkbox input
Checks and Radios Default layout (stacked)

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with `.form-check`.

Default checkbox
Disabled checkbox
Default radio
Second default radio
Disabled radio
Checks and Radios Inline

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

1
2
3 (disabled)
1
2
3 (disabled)
Checks and Radios Without labels

Omit the wrapping `.form-check` for checkboxes and radios that have no label text. Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`). See the forms overview accessibility section for details.

Toggle buttons

Create button-like checkboxes and radio buttons by using `.btn` styles rather than `.form-check-label` on the `<label>` elements. These toggle buttons can further be grouped in a button group if needed.

### Checkbox toggle buttons

Single toggle
Checked
Disabled
Toggle buttons Radio
Checked Radio Disabled Radio

### Outlined styles

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

Single toggle
Checked
Checked success radio Danger radio