Checkboxs & Radios | Velzon - Admin & Dashboard Template

#### Are you sure ?

Are you sure you want to remove this Notification ?

#### Checkboxs & Radios

#### Checkbox

Show Code

Default Checkbox

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

Default checkbox
Checked checkbox

Disabled Checkbox

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

Disabled checkbox
Disabled checked checkbox

Checkbox Right

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

Form Radio Right
Disabled checked checkbox

Indeterminate

Indeterminate checkbox

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

Show Code

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

Checkbox Primary
Checkbox Secondary
Checkbox Success
Checkbox Warning
Checkbox Danger
Checkbox Info
Checkbox Dark

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

Checkbox Outline Primary
Checkbox Outline Secondary
Checkbox Outline Success
Checkbox Outline Warning
Checkbox Outline Danger
Checkbox Outline Info
Checkbox Outline Dark

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

Show Code

Default Radios

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

Default radio
Default checked radio

Disabled Radios

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

Disabled radio
Disabled checked radio

Radio Right

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

Form Radio Right
Disabled checked radio

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

Show Code

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

Radio Primary
Radio Secondary
Radio Success
Radio Warning
Radio Danger
Radio Info
Radio Dark

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

Radio Outline Primary
Radio Outline Secondary
Radio Outline Success
Radio Outline Warning
Radio Outline Danger
Radio Outline Info
Radio Outline Dark

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

Show Code

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.

Default switch input
Checked switch input

Disabled Switchs

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

Switch input
Disabled checked switch input

Switch Right

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

Switch Right input
Disabled checked switch input

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.

Small Size Switch
Medium Size Switch
Large Size Switch

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

Show Code

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

Switch Default
Switch Secondary
Switch Success
Switch Warning
Switch Danger
Switch Info
Switch Dark

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

Show Code

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

Switch Primary
Switch Secondary
Switch Success
Switch Warning
Switch Danger
Switch Info
Switch Dark

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

Show Code

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

1
2
3 (disabled)
1
2
3 (disabled)
1
2
2

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

Show Code

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

Show Code

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.

Checked Radio Disabled Radio

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

Show Code

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

Single toggle Checked Checked success radio Danger radio

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

Loading...

##### Theme Customizer

###### Layout

Choose your layout

##### Vertical

##### Horizontal

##### Two Column

##### Semi Box

###### Color Scheme

Choose Light or Dark Scheme.

##### Light

##### Dark

###### Layout Width

Choose Fluid or Boxed layout.

##### Fluid

##### Boxed

###### Layout Position

Choose Fixed or Scrollable Layout Position.

Fixed Scrollable

###### Topbar Color

Choose Light or Dark Topbar Color.

##### Light

##### Dark

###### Background Image

Choose a body background image.

##### None

##### One

##### Two

##### Three