# Checkbox & Radio

###### Checkboxes and radio buttons form elements with support for custom designs using classes like `.form-check` and `.form-check-input`.

## Checkbox inputs

Add `.form-check` wrapper to your `input` and `label` to create a custom checkbox component. You can add `.rounded-circle` to the input to make it circular.

##### Block alignment

Unchecked
Checked
Indeterminate
Unchecked & disabled
Checked & disabled

##### Inline alignment

Unchecked
Checked
Disabled
Checked & disabled

## Radio inputs

Add `.form-check` wrapper to your `input` and `label` to create a custom radio component. You can add `.rounded` to change it to a rounded radio

##### Block alignment

Unchecked
Checked
Unchecked
Disabled
Checked & disabled

##### Inline alignment

Unchecked
Checked
Disabled
Checked & disabled

## Switch radio and checkbox

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

##### Switch checkbox

Unchecked
Checked
Disabled
Checked & disabled

##### Switch Radio

Unchecked
Checked
Disabled
Checked & disabled

#### Hi Sunny,

how can I help you today?
Analyze my data

Create a new report

Summarize my Calendar

App Builder
Unlock limitless design potential with 16+ layout combinations and extensive customization options—tailor your dashboard to fit your exact needs.
Header position fixed
Navigation full height
Navigation position fixed
Navigation collapsed
Navigation Minified
Dark Navigation
Colorblind Mode
High Contrast Mode