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>
© Velzon.
Design & Develop by Themesbrand