Checkbox & Radios

  1. Forms
  2. Checkbox & Radios
Customizer
Judia Builder

Choose your themes & layouts etc.

Select Layouts

Choose your layout.

Vertical
Horizontal
Color Scheme

Choose Light or Dark Scheme.

Light
Dark
Brand
Card Layout

Choose borderless or border layout.

Borderless
Border
Layout Width

Choose Fluid or Boxed layout.

Fluid
Boxed
Layout Position

Choose Fixed or Scrollable Layout Position.

Topbar Color

Choose Light, Dark or Brand Topbar Color.

Light
Dark
Brand
Topbar Images

Choose Topbar Images.

Preloader

Choose a preloader.

Enable
Disable
Buy Now

Checkbox

Default Checkbox

Use type="checkbox" attribute to set a checkbox and add checkedattribute 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

HTML Preview
<!-- 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 Checkbox

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.

HTML Preview
<!-- 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.

HTML Preview
<!-- 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.

HTML Preview
<!-- 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>

Switches

Default Switches

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.

HTML Preview
<!-- Base Switches -->
<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 Switches -->
<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.

HTML Preview
<!-- 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>

Inline Checkbox & Radios

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

HTML Preview
<!-- 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).

HTML Preview
<!-- 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.

HTML Preview
<!-- 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.

HTML Preview
<!-- 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>
© Judia.
Design & Develop by Themesbrand