Checkboxs & Radios

  1. Forms
  2. Checkboxs & Radios

Checkbox

Default Checkbox

Use type="checkbox" attribute to set a checkbox and add checked attribute to set a checkbox checked by default.

Disabled Checkbox

Use disabled attribute to set a checkbox disabled and add checked attribute to set a checkbox checked by default.

Checkbox Right

Use form-check-right class to form-check class to set a checkbox on the right side.

Indeterminate

<!-- Base Example -->
<div class="form-check mb-2">
    <input class="form-check-input" type="checkbox" id="formCheck1">
    <label class="form-check-label" for="formCheck1">
        Default checkbox
    </label>
</div>

<div class="form-check">
    <input class="form-check-input" type="checkbox" id="formCheck2" checked="">
    <label class="form-check-label" for="formCheck2">
        Checked checkbox
    </label>
</div>

<!-- Disabled Checkbox -->
<div class="form-check form-check-right mb-2">
    <input class="form-check-input" type="checkbox" name="formCheckboxRight" id="formCheckboxRight1" checked="">
    <label class="form-check-label" for="formCheckboxRight1">
        Form Radio Right
    </label>
</div>

<div>
    <div class="form-check form-check-right">
        <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
        <label class="form-check-label" for="flexCheckCheckedDisabled">
            Disabled checked checkbox
        </label>
    </div>
</div>

<!-- Form Checkbox Right -->
<div class="form-check form-check-right mb-2">
    <input class="form-check-input" type="checkbox" name="formCheckboxRight" id="formCheckboxRight1" checked="">
    <label class="form-check-label" for="formCheckboxRight1">
        Form Radio Right
    </label>
</div>

<div>
    <div class="form-check form-check-right">
        <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
        <label class="form-check-label" for="flexCheckCheckedDisabled">
            Disabled checked checkbox
        </label>
    </div>
</div>

<!-- Indeterminate -->
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
    <label class="form-check-label" for="flexCheckIndeterminate">
      Indeterminate checkbox
    </label>
</div>

Custom Checkboxes

Use form-check- class with below-mentioned color variation to set a color checkbox.

Use form-check-outline class and form-check- class with below-mentioned color variation to set a color checkbox with outline.

<!-- Custom Checkboxes Color -->
<div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck6" checked>
    <label class="form-check-label" for="formCheck6">
        Checkbox Primary
    </label>
</div>
<div class="form-check form-check-secondary mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck7" checked>
    <label class="form-check-label" for="formCheck7">
        Checkbox Secondary
    </label>
</div>
<div class="form-check form-check-success mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck8" checked>
    <label class="form-check-label" for="formCheck8">
        Checkbox Success
    </label>
</div>
<div class="form-check form-check-warning mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck9" checked>
    <label class="form-check-label" for="formCheck9">
        Checkbox Warning
    </label>
</div>
<div class="form-check form-check-danger mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck10" checked>
    <label class="form-check-label" for="formCheck10">
        Checkbox Danger
    </label>
</div>
<div class="form-check form-check-info mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck11" checked>
    <label class="form-check-label" for="formCheck11">
        Checkbox Info
    </label>
</div>
<div class="form-check form-check-dark mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck12" checked>
    <label class="form-check-label" for="formCheck12">
        Checkbox Dark
    </label>
</div>
<div class="form-check form-check-light">
    <input class="form-check-input" type="checkbox" id="formCheck12" checked>
    <label class="form-check-label" for="formCheck12">
        Checkbox Light
    </label>
</div>


<!-- Custom Outline Checkboxes -->
<div class="form-check form-check-outline form-check-primary mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck13" checked>
    <label class="form-check-label" for="formCheck13">
        Checkbox Outline Primary
    </label>
</div>
<div class="form-check form-check-outline form-check-secondary mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck14" checked>
    <label class="form-check-label" for="formCheck14">
        Checkbox Outline Secondary
    </label>
</div>
<div class="form-check form-check-outline form-check-success mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck15" checked>
    <label class="form-check-label" for="formCheck15">
        Checkbox Outline Success
    </label>
</div>
<div class="form-check form-check-outline form-check-warning mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck16" checked>
    <label class="form-check-label" for="formCheck16">
        Checkbox Outline Warning
    </label>
</div>
<div class="form-check form-check-outline form-check-danger mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck17" checked>
    <label class="form-check-label" for="formCheck17">
        Checkbox Outline Danger
    </label>
</div>
<div class="form-check form-check-outline form-check-info mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck18" checked>
    <label class="form-check-label" for="formCheck18">
        Checkbox Outline Info
    </label>
</div>
<div class="form-check form-check-outline form-check-dark mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck19" checked>
    <label class="form-check-label" for="formCheck19">
        Checkbox Outline Dark
    </label>
</div>
<div class="form-check form-check-outline form-check-light mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck20" checked>
    <label class="form-check-label" for="formCheck20">
        Checkbox Outline light
    </label>
</div>

Radios

Default Radios

Use type="radio" attribute to set a radio button and add checked attribute to set a radio checked by default.

Disabled Radios

Use disabled attribute to set a radio button disabled and add checked attribute to set a radio checked by default.

Radio Right

Use form-check-right class to form-check class to set a radio button on the right side.

<!-- Base Radios -->
<div class="form-check mb-2">
    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
    <label class="form-check-label" for="flexRadioDefault1">
        Default radio
    </label>
</div>

<div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
    <label class="form-check-label" for="flexRadioDefault2">
        Default checked radio
    </label>
</div>

<!-- Disabled Radios -->
<div class="form-check mb-2">
    <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
    <label class="form-check-label" for="flexRadioDisabled">
      Disabled radio
    </label>
</div>

<div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
        <label class="form-check-label" for="flexRadioCheckedDisabled">
          Disabled checked radio
        </label>
    </div>
</div>

<!-- Form Radio Right -->
<div class="form-check form-check-right mb-3">
    <input class="form-check-input" type="radio" name="formradioRight" id="formradioRight1" checked="">
    <label class="form-check-label" for="formradioRight1">
        Form Radio Right
    </label>
</div>

<div>
    <div class="form-check form-check-right">
        <input class="form-check-input" type="radio" value="" id="flexCheckCheckedDisabled" checked disabled>
        <label class="form-check-label" for="flexCheckCheckedDisabled">
            Disabled checked radio
        </label>
    </div>
</div>

Custom Radio

Use form-check- class with below-mentioned color variation to set a color radio.

Use form-check-outline class and form-check- class with below-mentioned color variation to set a color radio with outline.

<!-- Custom Radio Color -->
<div class="form-check form-radio-primary mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor1" id="formradioRight5" checked>
    <label class="form-check-label" for="formradioRight5">
        Radio Primary
    </label>
</div>
<div class="form-check form-radio-secondary mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor2" id="formradioRight6" checked>
    <label class="form-check-label" for="formradioRight6">
        Radio Secondary
    </label>
</div>
<div class="form-check form-radio-success mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor3" id="formradioRight7" checked>
    <label class="form-check-label" for="formradioRight7">
        Radio Success
    </label>
</div>
<div class="form-check form-radio-warning mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor4" id="formradioRight8" checked>
    <label class="form-check-label" for="formradioRight8">
        Radio Warning
    </label>
</div>
<div class="form-check form-radio-danger mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor5" id="formradioRight9" checked>
    <label class="form-check-label" for="formradioRight9">
        Radio Danger
    </label>
</div>
<div class="form-check form-radio-info mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor6" id="formradioRight10" checked>
    <label class="form-check-label" for="formradioRight10">
        Radio Info
    </label>
</div>
<div class="form-check form-radio-dark mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor7" id="formradioRight11" checked>
    <label class="form-check-label" for="formradioRight11">
        Radio Dark
    </label>
</div>
<div class="form-check form-radio-light">
    <input class="form-check-input" type="radio" name="formradiocolor8" id="formradioRight12" checked>
    <label class="form-check-label" for="formradioRight12">
        Radio light
    </label>
</div>

<!-- Custom Outline Radio -->
<div class="form-check form-radio-outline form-radio-primary mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor9" id="formradioRight13" checked>
    <label class="form-check-label" for="formradioRight13">
        Radio Outline Primary
    </label>
</div>
<div class="form-check form-radio-outline form-radio-secondary mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor10" id="formradioRight14" checked>
    <label class="form-check-label" for="formradioRight14">
        Radio Outline Secondary
    </label>
</div>
<div class="form-check form-radio-outline form-radio-success mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor11" id="formradioRight15" checked>
    <label class="form-check-label" for="formradioRight15">
        Radio Outline Success
    </label>
</div>
<div class="form-check form-radio-outline form-radio-warning mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor12" id="formradioRight16" checked>
    <label class="form-check-label" for="formradioRight16">
        Radio Outline Warning
    </label>
</div>
<div class="form-check form-radio-outline form-radio-danger mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor13" id="formradioRight17" checked>
    <label class="form-check-label" for="formradioRight17">
        Radio Outline Danger
    </label>
</div>
<div class="form-check form-radio-outline form-radio-info mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor14" id="formradioRight18" checked>
    <label class="form-check-label" for="formradioRight18">
        Radio Outline Info
    </label>
</div>
<div class="form-check form-radio-outline form-radio-dark mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor15" id="formradioRight19" checked>
    <label class="form-check-label" for="formradioRight19">
        Radio Outline Dark
    </label>
</div>
<div class="form-check form-radio-outline form-radio-light">
    <input class="form-check-input" type="radio" name="formradiocolor16" id="formradioRight20" checked>
    <label class="form-check-label" for="formradioRight20">
        Radio Outline light
    </label>
</div>

Switches

Deafult Switchs

Use form-switch class to form-check class to set a switch and add checked attribute to set a switch checked by default.

Disabled Switchs

Use disabled attribute to set a radio button disabled and add checked attribute to set a switch checked by default.

Switch Right

Use form-check-right class to form-check class to set a switch button on the right side.

Switch sizes

Use form-switch-md class to set a medium size switch button and form-switch-lg class to form-check class to set a large size switch button respectively. No such class is required for small size switch button. 

<!-- Base Switchs -->
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
    <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>

<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
    <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>

<!-- Disabled Switchs -->
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
    <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>

<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
    <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

<!-- Form Switch Right -->
<div class="form-check form-switch form-check-right">
    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckRightDisabled" checked>
    <label class="form-check-label" for="flexSwitchCheckRightDisabled">Disabled switch checkbox input</label>
</div>

<div class="form-check form-switch form-check-right">
    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" disabled>
    <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

<!-- Switch sizes -->
<div class="form-check form-switch" dir="ltr">
    <input type="checkbox" class="form-check-input" id="customSwitchsizesm" checked="">
    <label class="form-check-label" for="customSwitchsizesm">Small Size Switch</label>
</div>

<div class="form-check form-switch form-switch-md" dir="ltr">
    <input type="checkbox" class="form-check-input" id="customSwitchsizemd">
    <label class="form-check-label" for="customSwitchsizemd">Medium Size Switch</label>
</div>

<div class="form-check form-switch form-switch-lg" dir="ltr">
    <input type="checkbox" class="form-check-input" id="customSwitchsizelg" checked="">
    <label class="form-check-label" for="customSwitchsizelg">Large Size Switch</label>
</div>

Switches Color

Use form-check- class with below-mentioned color variation to set a color switch.

<!-- Switches Color -->
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck1" checked>
    <label class="form-check-label" for="SwitchCheck1">Switch Default</label>
</div>
<div class="form-check form-switch form-switch-secondary">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck2" checked>
    <label class="form-check-label" for="SwitchCheck2">Switch Secondary</label>
</div>
<div class="form-check form-switch form-switch-success">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck3" checked>
    <label class="form-check-label" for="SwitchCheck3">Switch Success</label>
</div>
<div class="form-check form-switch form-switch-warning">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck4" checked>
    <label class="form-check-label" for="SwitchCheck4">Switch Warning</label>
</div>
<div class="form-check form-switch form-switch-danger">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck5" checked>
    <label class="form-check-label" for="SwitchCheck5">Switch Danger</label>
</div>
<div class="form-check form-switch form-switch-info">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck6" checked>
    <label class="form-check-label" for="SwitchCheck6">Switch Info</label>
</div>
<div class="form-check form-switch form-switch-dark">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck7" checked>
    <label class="form-check-label" for="SwitchCheck7">Switch Dark</label>
</div>

Custom Switches

Use form-switch-custom class & form-switch- class with below-mentioned color variation to set a color radius.

<!-- Custom Switches -->
<div class="form-check form-switch form-switch-custom form-switch-primary">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck9" checked>
    <label class="form-check-label" for="SwitchCheck9">Switch Default</label>
</div>

<div class="form-check form-switch form-switch-custom form-switch-secondary">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck10" checked>
    <label class="form-check-label" for="SwitchCheck10">Switch Secondary</label>
</div>

<div class="form-check form-switch form-switch-custom form-switch-success">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck11" checked>
    <label class="form-check-label" for="SwitchCheck11">Switch Success</label>
</div>

<div class="form-check form-switch form-switch-custom form-switch-warning">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck12" checked>
    <label class="form-check-label" for="SwitchCheck12">Switch Warning</label>
</div>

<div class="form-check form-switch form-switch-custom form-switch-danger">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck13" checked>
    <label class="form-check-label" for="SwitchCheck13">Switch Danger</label>
</div>

<div class="form-check form-switch form-switch-custom form-switch-info">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck14" checked>
    <label class="form-check-label" for="SwitchCheck14">Switch Info</label>
</div>

<div class="form-check form-switch form-switch-custom form-switch-dark">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck15" checked>
    <label class="form-check-label" for="SwitchCheck15">Switch Dark</label>
</div>

Inline Checkbox & Radios

Use form-check-inline class to form-check class to set horizontally align checkboxes, radios, or switches.

<!-- Inline Checkbox -->
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
    <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
    <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
    <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

<!-- Inline Radios -->
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio1" value="option1">
    <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions2" id="inlineRadio2" value="option2">
    <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions3" id="inlineRadio3" value="option3" disabled>
    <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

<!-- Inline Switches -->
<div class="form-check form-switch form-check-inline" dir="ltr">
    <input type="checkbox" class="form-check-input" id="inlineswitch">
    <label class="form-check-label" for="inlineswitch">1</label>
</div>
<div class="form-check form-switch form-check-inline" dir="ltr">
    <input type="checkbox" class="form-check-input" id="inlineswitch1">
    <label class="form-check-label" for="inlineswitch1">2</label>
</div>
<div class="form-check form-switch form-check-inline" dir="ltr">
    <input type="checkbox" class="form-check-input" id="inlineswitchdisabled" disabled>
    <label class="form-check-label" for="inlineswitchdisabled">2</label>
</div>

Without Labels

Omit the wrapping, form-check class for checkboxes, radios, or switches that have no label text. Remember to still provide some form of accessible name for assistive technologies (for instance, using aria-label).

<!-- Without labels Checkbox -->
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
</div>


<!-- Without labels Radios -->
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="WithoutinlineRadio1" value="option1">
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="WithoutinlineRadio2" value="option2">
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="WithoutinlineRadio3" value="option3" disabled>
</div>

<!-- Without labels Switches -->
<div class="form-check form-switch form-check-inline" dir="ltr">
    <input type="checkbox" class="form-check-input" id="inlineswitch">
</div>
<div class="form-check form-switch form-check-inline" dir="ltr">
    <input type="checkbox" class="form-check-input" id="inlineswitch1">
</div>
<div class="form-check form-switch form-check-inline" dir="ltr">
    <input type="checkbox" class="form-check-input" id="inlineswitchdisabled" disabled>
</div>

Radio Toggle Buttons

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

<!-- Radio toggle buttons   -->
<div class="hstack gap-2 flex-wrap">
    <input type="radio" class="btn-check" name="options" id="option1"  checked>
    <label class="btn btn-secondary" for="option1">Checked</label>

    <input type="radio" class="btn-check" name="options" id="option2" >
    <label class="btn btn-secondary" for="option2">Radio</label>

    <input type="radio" class="btn-check" name="options" id="option3"  disabled>
    <label class="btn btn-secondary" for="option3">Disabled</label>

    <input type="radio" class="btn-check" name="options" id="option4" >
    <label class="btn btn-secondary" for="option4">Radio</label>
</div>

Outlined Styles

Different variants of btn attribute, such as the various outlined styles, are supported.

<!-- Outlined Styles -->
<div class="hstack gap-2 flex-wrap">
    <input type="checkbox" class="btn-check" id="btn-check-outlined">
    <label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label>

    <input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked>
    <label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label>

    <input type="radio" class="btn-check" name="options-outlined" id="success-outlined" checked>
    <label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>

    <input type="radio" class="btn-check" name="options-outlined" id="danger-outlined">
    <label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>
</div>
© Bluella.
Design & Develop by Bluella Private Limited