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>
ASENSO TURISMO

Mission
To inspire and connect travelers by showcasing the wonders of every destination, fostering sustainable tourism, and creating meaningful experiences that enrich both the traveler and the local communities.

Vision
To become a leading platform for tourism, empowering travelers to explore the world with ease while promoting cultural appreciation, environmental responsibility, and economic growth in every destination.

Quick Links
Web Pages
Support

© Province of Misamis Occidental