Material Pro Template by WrapPixel

CAROUSEL

Previous Next

ACCORDION

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

CONTACT US

Enter Name

Enter Email address

Enter Message
List style

Checkbox and Radio buttons

THIS MONTH

$58,356

LAST MONTH

$48,356

Checkboxes

Checks

                                                        
                                                            <div class="form-check">
                                                              <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                                              <label class="form-check-label" for="flexCheckDefault">
                                                                Default checkbox
                                                              </label>
                                                            </div>
                                                            <div class="form-check">
                                                              <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
                                                              <label class="form-check-label" for="flexCheckChecked">
                                                                Checked checkbox
                                                              </label>
                                                            </div>

Default checkbox

Checked checkbox

Checks - Disabled

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

Disabled checkbox

Disabled checked checkbox

Checks - Colors

                                                            
                                                                    <div class="row py-2">
                                                                                <div class="col-md-4">
                                                                                    <label>Success</label>
                                                                                </div>
                                                                                <div class="col-md-8">
                                                                                        <div class="form-check form-check-inline">
                                                                                          <input class="form-check-input success" type="checkbox" id="success-check" value="option1">
                                                                                          <label class="form-check-label" for="success-check">Default</label>
                                                                                        </div>
                                                                                        <div class="form-check form-check-inline">
                                                                                          <input class="form-check-input success" type="checkbox" id="success2-check" value="option1" checked="">
                                                                                          <label class="form-check-label" for="success2-check">Checked</label>
                                                                                        </div>
                                                                                        <div class="form-check form-check-inline">
                                                                                          <input class="form-check-input success" type="checkbox" id="success3-check" value="option1" disabled="" checked="">
                                                                                          <label class="form-check-label" for="success3-check">Disabled</label>
                                                                                        </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="row py-2">
                                                                                <div class="col-md-4">
                                                                                    <label>Danger</label>
                                                                                </div>
                                                                                <div class="col-md-8">
                                                                                        <div class="form-check form-check-inline">
                                                                                          <input class="form-check-input danger" type="checkbox" id="danger-check" value="option1">
                                                                                          <label class="form-check-label" for="danger-check">Default</label>
                                                                                        </div>
                                                                                        <div class="form-check form-check-inline">
                                                                                          <input class="form-check-input danger" type="checkbox" id="danger2-check" value="option1" checked="">
                                                                                          <label class="form-check-label" for="danger2-check">Checked</label>
                                                                                        </div>
                                                                                        <div class="form-check form-check-inline">
                                                                                          <input class="form-check-input danger" type="checkbox" id="danger3-check" value="option1" disabled="" checked="">
                                                                                          <label class="form-check-label" for="danger3-check">Disabled</label>
                                                                                        </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="row py-2">
                                                                                <div class="col-md-4">
                                                                                    <label>Warning</label>
                                                                                </div>
                                                                                <div class="col-md-8">
                                                                                        <div class="form-check form-check-inline">
                                                                                          <input class="form-check-input warning" type="checkbox" id="warning-check" value="option1">
                                                                                          <label class="form-check-label" for="warning-check">Default</label>
                                                                                        </div>
                                                                                        <div class="form-check form-check-inline">
                                                                                          <input class="form-check-input warning" type="checkbox" id="warning2-check" value="option1" checked="">
                                                                                          <label class="form-check-label" for="warning2-check">Checked</label>
                                                                                        </div>
                                                                                        <div class="form-check form-check-inline">
                                                                                          <input class="form-check-input warning" type="checkbox" id="warning3-check" value="option1" disabled="" checked="">
                                                                                          <label class="form-check-label" for="warning3-check">Disabled</label>
                                                                                        </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="row py-2">
                                                                                <div class="col-md-4">
                                                                                    <label>Primary</label>
                                                                                </div>
                                                                                <div class="col-md-8">
                                                                                        <div class="form-check form-check-inline">
                                                                                          <input class="form-check-input primary" type="checkbox" id="primary-check" value="option1">
                                                                                          <label class="form-check-label" for="primary-check">Default</label>
                                                                                        </div>
                                                                                        <div class="form-check form-check-inline">
                                                                                          <input class="form-check-input primary" type="checkbox" id="primary2-check" value="option1" checked="">
                                                                                          <label class="form-check-label" for="primary2-check">Checked</label>
                                                                                        </div>
                                                                                        <div class="form-check form-check-inline">
                                                                                          <input class="form-check-input primary" type="checkbox" id="primary3-check" value="option1" disabled="" checked="">
                                                                                          <label class="form-check-label" for="primary3-check">Disabled</label>
                                                                                        </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="row py-2">
                                                                                <div class="col-md-4">
                                                                                    <label>Secondary</label>
                                                                                </div>
                                                                                <div class="col-md-8">
                                                                                        <div class="form-check form-check-inline">
                                                                                          <input class="form-check-input secondary" type="checkbox" id="secondary-check" value="option1">
                                                                                          <label class="form-check-label" for="secondary-check">Default</label>
                                                                                        </div>
                                                                                        <div class="form-check form-check-inline">
                                                                                          <input class="form-check-input secondary" type="checkbox" id="secondary2-check" value="option1" checked="">
                                                                                          <label class="form-check-label" for="secondary2-check">Checked</label>
                                                                                        </div>
                                                                                        <div class="form-check form-check-inline">
                                                                                          <input class="form-check-input secondary" type="checkbox" id="secondary3-check" value="option1" disabled="" checked="">
                                                                                          <label class="form-check-label" for="secondary3-check">Disabled</label>
                                                                                        </div>
                                                                                </div>
                                                                            </div>

Success

Default

Checked

Disabled

Danger

Default

Checked

Disabled

Warning

Default

Checked

Disabled

Primary

Default

Checked

Disabled

Secondary

Default

Checked

Disabled

Checks - Light Colors

                                                            
                                                                <div class="row py-2">
                                                                    <div class="col-md-4">
                                                                        <label>Light Success</label>
                                                                    </div>
                                                                    <div class="col-md-8">
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input success check-light-success" type="checkbox" id="success-light-check" value="option1">
                                                                              <label class="form-check-label" for="success-light-check">Default</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input success" type="checkbox" id="success2-check" value="option1" checked="">
                                                                              <label class="form-check-label" for="success2-check">Checked</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input success" type="checkbox" id="success3-check" value="option1" disabled="" checked="">
                                                                              <label class="form-check-label" for="success3-check">Disabled</label>
                                                                            </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row py-2">
                                                                    <div class="col-md-4">
                                                                        <label>Light Danger</label>
                                                                    </div>
                                                                    <div class="col-md-8">
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input danger check-light-danger" type="checkbox" id="danger-light-check" value="option1">
                                                                              <label class="form-check-label" for="danger-light-check">Default</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input danger check-light-danger" type="checkbox" id="danger2-light-check" value="option1" checked="">
                                                                              <label class="form-check-label" for="danger2-light-check">Checked</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input danger check-light-danger" type="checkbox" id="danger3-light-check" value="option1" disabled="" checked="">
                                                                              <label class="form-check-label" for="danger3-light-check">Disabled</label>
                                                                            </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row py-2">
                                                                    <div class="col-md-4">
                                                                        <label>Light Warning</label>
                                                                    </div>
                                                                    <div class="col-md-8">
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input warning check-light-warning" type="checkbox" id="warning-light-check" value="option1">
                                                                              <label class="form-check-label" for="warning-light-check">Default</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input warning check-light-warning" type="checkbox" id="warning2-light-check" value="option1" checked="">
                                                                              <label class="form-check-label" for="warning2-light-check">Checked</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input warning check-light-warning" type="checkbox" id="warning3-light-check" value="option1" disabled="" checked="">
                                                                              <label class="form-check-label" for="warning3-light-check">Disabled</label>
                                                                            </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row py-2">
                                                                    <div class="col-md-4">
                                                                        <label>Light Primary</label>
                                                                    </div>
                                                                    <div class="col-md-8">
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input primary check-light-primary" type="checkbox" id="primary-light-check" value="option1">
                                                                              <label class="form-check-label" for="primary-light-check">Default</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input primary check-light-primary" type="checkbox" id="primary2-light-check" value="option1" checked="">
                                                                              <label class="form-check-label" for="primary2-light-check">Checked</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input primary check-light-primary" type="checkbox" id="primary3-light-check" value="option1" disabled="" checked="">
                                                                              <label class="form-check-label" for="primary3-light-check">Disabled</label>
                                                                            </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row py-2">
                                                                    <div class="col-md-4">
                                                                        <label>Light Secondary</label>
                                                                    </div>
                                                                    <div class="col-md-8">
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input secondary check-light-secondary" type="checkbox" id="secondary-light-check" value="option1">
                                                                              <label class="form-check-label" for="secondary-light-check">Default</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input secondary check-light-secondary" type="checkbox" id="secondary2-light-check" value="option1" checked="">
                                                                              <label class="form-check-label" for="secondary2-light-check">Checked</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input secondary check-light-secondary" type="checkbox" id="secondary3-light-check" value="option1" disabled="" checked="">
                                                                              <label class="form-check-label" for="secondary3-light-check">Disabled</label>
                                                                            </div>
                                                                    </div>
                                                                </div>

Success

Default

Checked

Disabled

Danger

Default

Checked

Disabled

Warning

Default

Checked

Disabled

Primary

Default

Checked

Disabled

Secondary

Default

Checked

Disabled

Checks - Outline Border Colors

                                                            
                                                                <div class="row py-2">
                                                                    <div class="col-md-4">
                                                                        <label>Success Border</label>
                                                                    </div>
                                                                    <div class="col-md-8">
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input success check-outline outline-success" type="checkbox" id="success-outline-check" value="option1">
                                                                              <label class="form-check-label" for="success-outline-check">Default</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input success check-outline outline-success" type="checkbox" id="success2-outline-check" value="option1" checked="">
                                                                              <label class="form-check-label" for="success2-outline-check">Checked</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input success check-outline outline-success" type="checkbox" id="success3-outline--check" value="option1" disabled="" checked="">
                                                                              <label class="form-check-label" for="success3-outline--check">Disabled</label>
                                                                            </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row py-2">
                                                                    <div class="col-md-4">
                                                                        <label>Danger Border</label>
                                                                    </div>
                                                                    <div class="col-md-8">
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input danger check-outline outline-danger" type="checkbox" id="danger-outline-check" value="option1">
                                                                              <label class="form-check-label" for="danger-outline-check">Default</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input danger check-outline outline-danger" type="checkbox" id="danger2-outline-check" value="option1" checked="">
                                                                              <label class="form-check-label" for="danger2-outline-check">Checked</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input danger check-outline outline-danger" type="checkbox" id="danger3-outline-check" value="option1" disabled="" checked="">
                                                                              <label class="form-check-label" for="danger3-outline-check">Disabled</label>
                                                                            </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row py-2">
                                                                    <div class="col-md-4">
                                                                        <label>Warning Border</label>
                                                                    </div>
                                                                    <div class="col-md-8">
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input warning check-outline outline-warning" type="checkbox" id="warning-outline-check" value="option1">
                                                                              <label class="form-check-label" for="warning-outline-check">Default</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input warning check-outline outline-warning" type="checkbox" id="warning2-outline-check" value="option1" checked="">
                                                                              <label class="form-check-label" for="warning2-outline-check">Checked</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input warning check-outline outline-warning" type="checkbox" id="warning3-outline-check" value="option1" disabled="" checked="">
                                                                              <label class="form-check-label" for="warning3-outline-check">Disabled</label>
                                                                            </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row py-2">
                                                                    <div class="col-md-4">
                                                                        <label>Primary Border</label>
                                                                    </div>
                                                                    <div class="col-md-8">
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input primary check-outline outline-primary" type="checkbox" id="primary-outline-check" value="option1">
                                                                              <label class="form-check-label" for="primary-outline-check">Default</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input primary check-outline outline-primary" type="checkbox" id="primary2-outline-check" value="option1" checked="">
                                                                              <label class="form-check-label" for="primary2-outline-check">Checked</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input primary check-outline outline-primary" type="checkbox" id="primary3-outline-check" value="option1" disabled="" checked="">
                                                                              <label class="form-check-label" for="primary3-outline-check">Disabled</label>
                                                                            </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row py-2">
                                                                    <div class="col-md-4">
                                                                        <label>Secondary Border</label>
                                                                    </div>
                                                                    <div class="col-md-8">
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input secondary check-outline outline-secondary" type="checkbox" id="secondary-outline-check" value="option1">
                                                                              <label class="form-check-label" for="secondary-outline-check">Default</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input secondary check-outline outline-secondary" type="checkbox" id="secondary2-outline-check" value="option1" checked="">
                                                                              <label class="form-check-label" for="secondary2-outline-check">Checked</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input secondary check-outline outline-secondary" type="checkbox" id="secondary3-outline-check" value="option1" disabled="" checked="">
                                                                              <label class="form-check-label" for="secondary3-outline-check">Disabled</label>
                                                                            </div>
                                                                    </div>
                                                                </div>

Success

Default

Checked

Disabled

Danger

Default

Checked

Disabled

Warning

Default

Checked

Disabled

Primary

Default

Checked

Disabled

Secondary

Default

Checked

Disabled

Radios

Radios - Default

                                                        
                                                          <div class="form-check">
                                                                  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
                                                                  <label class="form-check-label" for="exampleRadios1">
                                                                    Default radio
                                                                  </label>
                                                                </div>
                                                                <div class="form-check">
                                                                  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
                                                                  <label class="form-check-label" for="exampleRadios2">
                                                                    Second default radio
                                                                  </label>
                                                                </div>
                                                                <div class="form-check">
                                                                  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
                                                                  <label class="form-check-label" for="exampleRadios3">
                                                                    Disabled radio
                                                                  </label>
                                                                </div>

Default radio

Second default radio

Disabled radio

Radios - Disabled

                                                        
                                                         <div class="form-check">
                                                          <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
                                                          <label class="form-check-label" for="flexRadioDisabled">
                                                            Disabled radio
                                                          </label>
                                                        </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>

Disabled radio

Disabled checked radio

Radio - Colors

                                                            
                                                                <div class="row py-2">
                                                                    <div class="col-md-4">
                                                                        <label>Success</label>
                                                                    </div>
                                                                    <div class="col-md-8">
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input success" type="radio" name="radio-solid-success" id="success-radio" value="option1">
                                                                              <label class="form-check-label" for="success-radio">Default</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input success" type="radio" name="radio-solid-success" id="success2-radio" value="option1" checked="">
                                                                              <label class="form-check-label" for="success2-radio">Checked</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input success" type="radio" name="radio-solid-success" id="success3-radio" value="option1" disabled="">
                                                                              <label class="form-check-label" for="success3-radio">Disabled</label>
                                                                            </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row py-2">
                                                                    <div class="col-md-4">
                                                                        <label>Danger</label>
                                                                    </div>
                                                                    <div class="col-md-8">
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input danger" type="radio" name="radio-solid-danger" id="danger-radio" value="option1">
                                                                              <label class="form-check-label" for="danger-radio">Default</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input danger" type="radio" name="radio-solid-danger" id="danger2-radio" value="option1" checked="">
                                                                              <label class="form-check-label" for="danger2-radio">Checked</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input danger" type="radio" name="radio-solid-danger" id="danger3-radio" value="option1" disabled="" >
                                                                              <label class="form-check-label" for="danger3-radio">Disabled</label>
                                                                            </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row py-2">
                                                                    <div class="col-md-4">
                                                                        <label>Warning</label>
                                                                    </div>
                                                                    <div class="col-md-8">
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input warning" type="radio" name="radio-solid-warning" id="warning-radio" value="option1">
                                                                              <label class="form-check-label" for="warning-radio">Default</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input warning" type="radio" name="radio-solid-warning" id="warning2-radio" value="option1" checked="">
                                                                              <label class="form-check-label" for="warning2-radio">Checked</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input warning" type="radio" name="radio-solid-warning" id="warning3-radio" value="option1" disabled="" >
                                                                              <label class="form-check-label" for="warning3-radio">Disabled</label>
                                                                            </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row py-2">
                                                                    <div class="col-md-4">
                                                                        <label>Primary</label>
                                                                    </div>
                                                                    <div class="col-md-8">
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input primary" type="radio" name="radio-solid-primary" id="primary-radio" value="option1">
                                                                              <label class="form-check-label" for="primary-radio">Default</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input primary" type="radio" name="radio-solid-primary" id="primary2-radio" value="option1" checked="">
                                                                              <label class="form-check-label" for="primary2-radio">Checked</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input primary" type="radio" name="radio-solid-primary" id="primary3-radio" value="option1" disabled="" >
                                                                              <label class="form-check-label" for="primary3-radio">Disabled</label>
                                                                            </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row py-2">
                                                                    <div class="col-md-4">
                                                                        <label>Secondary</label>
                                                                    </div>
                                                                    <div class="col-md-8">
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input secondary" type="radio" name="radio-solid-secondary" id="secondary-radio" value="option1">
                                                                              <label class="form-check-label" for="secondary-radio">Default</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input secondary" type="radio" name="radio-solid-secondary" id="secondary2-radio" value="option1" checked="">
                                                                              <label class="form-check-label" for="secondary2-radio">Checked</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input secondary" type="radio" name="radio-solid-secondary" id="secondary3-radio" value="option1" disabled="" >
                                                                              <label class="form-check-label" for="secondary3-radio">Disabled</label>
                                                                            </div>
                                                                    </div>
                                                                </div>

Success

Default

Checked

Disabled

Danger

Default

Checked

Disabled

Warning

Default

Checked

Disabled

Primary

Default

Checked

Disabled

Secondary

Default

Checked

Disabled

Radios - Light Colors

                                                            
                                                                <div class="row py-2">
                                                                    <div class="col-md-4">
                                                                        <label>Light Success</label>
                                                                    </div>
                                                                    <div class="col-md-8">
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input success check-light-success" type="radio" name="radio-light-success" id="success-light-radio" value="option1">
                                                                              <label class="form-check-label" for="success-light-radio">Default</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input success check-light-success" type="radio" name="radio-light-success" id="success2-light-radio" value="option1" checked="">
                                                                              <label class="form-check-label" for="success2-light-radio">Checked</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input success check-light-success" type="radio" name="radio-light-success" id="success3-light-radio" value="option1" disabled="">
                                                                              <label class="form-check-label" for="success3-light-radio">Disabled</label>
                                                                            </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row py-2">
                                                                    <div class="col-md-4">
                                                                        <label>Light Danger</label>
                                                                    </div>
                                                                    <div class="col-md-8">
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input danger check-light-danger" type="radio" name="radio-light-danger" id="danger-light-radio" value="option1">
                                                                              <label class="form-check-label" for="danger-light-radio">Default</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input danger check-light-danger" type="radio" name="radio-light-danger" id="danger2-light-radio" value="option1" checked="">
                                                                              <label class="form-check-label" for="danger2-light-radio">Checked</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input danger check-light-danger" type="radio" name="radio-light-danger" id="danger3-light-radio" value="option1" disabled="">
                                                                              <label class="form-check-label" for="danger3-light-radio">Disabled</label>
                                                                            </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row py-2">
                                                                    <div class="col-md-4">
                                                                        <label>Light Warning</label>
                                                                    </div>
                                                                    <div class="col-md-8">
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input warning check-light-warning" type="radio" name="radio-light-warning" id="warning-light-radio" value="option1">
                                                                              <label class="form-check-label" for="warning-light-radio">Default</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input warning check-light-warning" type="radio" name="radio-light-warning" id="warning2-light-radio" value="option1" checked="">
                                                                              <label class="form-check-label" for="warning2-light-radio">Checked</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input warning check-light-warning" type="radio" name="radio-light-warning" id="warning3-light-radio" value="option1" disabled="">
                                                                              <label class="form-check-label" for="warning3-light-radio">Disabled</label>
                                                                            </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row py-2">
                                                                    <div class="col-md-4">
                                                                        <label>Light Primary</label>
                                                                    </div>
                                                                    <div class="col-md-8">
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input primary check-light-primary" type="radio" name="radio-light-primary" id="primary-light-radio" value="option1">
                                                                              <label class="form-check-label" for="primary-light-radio">Default</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input primary check-light-primary" type="radio" name="radio-light-primary" id="primary2-light-radio" value="option1" checked="">
                                                                              <label class="form-check-label" for="primary2-light-radio">Checked</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input primary check-light-primary" type="radio" name="radio-light-primary" id="primary3-light-radio" value="option1" disabled="">
                                                                              <label class="form-check-label" for="primary3-light-radio">Disabled</label>
                                                                            </div>
                                                                    </div>
                                                                </div>
                                                                <div class="row py-2">
                                                                    <div class="col-md-4">
                                                                        <label>Light Secondary</label>
                                                                    </div>
                                                                    <div class="col-md-8">
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input secondary check-light-secondary" type="radio" name="radio-light-secondary" id="secondary-light-radio" value="option1">
                                                                              <label class="form-check-label" for="secondary-light-radio">Default</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input secondary check-light-secondary" type="radio" name="radio-light-secondary" id="secondary2-light-radio" value="option1" checked="">
                                                                              <label class="form-check-label" for="secondary2-light-radio">Checked</label>
                                                                            </div>
                                                                            <div class="form-check form-check-inline">
                                                                              <input class="form-check-input secondary check-light-secondary" type="radio" name="radio-light-secondary" id="secondary3-light-radio" value="option1" disabled="">
                                                                              <label class="form-check-label" for="secondary3-light-radio">Disabled</label>
                                                                            </div>
                                                                    </div>
                                                                </div>

Success

Default

Checked

Disabled

Danger

Default

Checked

Disabled

Warning

Default

Checked

Disabled

Primary

Default

Checked

Disabled

Secondary

Default

Checked

Disabled

Radios - Outline Border Colors

                                                        
                                                            <div class="row py-2">
                                                                <div class="col-md-4">
                                                                    <label>Success Border</label>
                                                                </div>
                                                                <div class="col-md-8">
                                                                        <div class="form-check form-check-inline">
                                                                          <input class="form-check-input success check-outline outline-success" type="radio" id="success-outline-radio" name="radio-success" value="option1">
                                                                          <label class="form-check-label" for="success-outline-radio">Default</label>
                                                                        </div>
                                                                        <div class="form-check form-check-inline">
                                                                          <input class="form-check-input success check-outline outline-success" type="radio" id="success2-outline-radio" name="radio-success" value="option1" checked="">
                                                                          <label class="form-check-label" for="success2-outline-radio">Checked</label>
                                                                        </div>
                                                                        <div class="form-check form-check-inline">
                                                                          <input class="form-check-input success check-outline outline-success" type="radio" id="success3-outline-radio" value="option1" name="radio-success" disabled="">
                                                                          <label class="form-check-label" for="success3-outline-radio">Disabled</label>
                                                                        </div>
                                                                </div>
                                                            </div>
                                                            <div class="row py-2">
                                                                <div class="col-md-4">
                                                                    <label>Danger Border</label>
                                                                </div>
                                                                <div class="col-md-8">
                                                                        <div class="form-check form-check-inline">
                                                                          <input class="form-check-input danger check-outline outline-danger" type="radio" id="danger-outline-radio" name="radio-danger" value="option1">
                                                                          <label class="form-check-label" for="danger-outline-radio">Default</label>
                                                                        </div>
                                                                        <div class="form-check form-check-inline">
                                                                          <input class="form-check-input danger check-outline outline-danger" type="radio" id="danger2-outline-radio" name="radio-danger" value="option1" checked="">
                                                                          <label class="form-check-label" for="danger2-outline-radio">Checked</label>
                                                                        </div>
                                                                        <div class="form-check form-check-inline">
                                                                          <input class="form-check-input danger check-outline outline-danger" type="radio" id="danger3-outline-radio" name="radio-danger" value="option1" disabled="">
                                                                          <label class="form-check-label" for="danger3-outline-radio">Disabled</label>
                                                                        </div>
                                                                </div>
                                                            </div>
                                                            <div class="row py-2">
                                                                <div class="col-md-4">
                                                                    <label>Warning Border</label>
                                                                </div>
                                                                <div class="col-md-8">
                                                                        <div class="form-check form-check-inline">
                                                                          <input class="form-check-input warning check-outline outline-warning" type="radio" name="radio-warning" id="warning-outline-radio" value="option1">
                                                                          <label class="form-check-label" for="warning-outline-radio">Default</label>
                                                                        </div>
                                                                        <div class="form-check form-check-inline">
                                                                          <input class="form-check-input warning check-outline outline-warning" type="radio" name="radio-warning" id="warning2-outline-radio" value="option1" checked="">
                                                                          <label class="form-check-label" for="warning2-outline-radio">Checked</label>
                                                                        </div>
                                                                        <div class="form-check form-check-inline">
                                                                          <input class="form-check-input warning check-outline outline-warning" type="radio" name="radio-warning" id="warning3-outline-radio" value="option1" disabled="">
                                                                          <label class="form-check-label" for="warning3-outline-radio">Disabled</label>
                                                                        </div>
                                                                </div>
                                                            </div>
                                                            <div class="row py-2">
                                                                <div class="col-md-4">
                                                                    <label>Primary Border</label>
                                                                </div>
                                                                <div class="col-md-8">
                                                                        <div class="form-check form-check-inline">
                                                                          <input class="form-check-input primary check-outline outline-primary" type="radio" name="radio-primary" id="primary-outline-radio" value="option1">
                                                                          <label class="form-check-label" for="primary-outline-radio">Default</label>
                                                                        </div>
                                                                        <div class="form-check form-check-inline">
                                                                          <input class="form-check-input primary check-outline outline-primary" type="radio" name="radio-primary" id="primary2-outline-radio" value="option1" checked="">
                                                                          <label class="form-check-label" for="primary2-outline-radio">Checked</label>
                                                                        </div>
                                                                        <div class="form-check form-check-inline">
                                                                          <input class="form-check-input primary check-outline outline-primary" type="radio" name="radio-primary" id="primary3-outline-radio" value="option1" disabled="">
                                                                          <label class="form-check-label" for="primary3-outline-radio">Disabled</label>
                                                                        </div>
                                                                </div>
                                                            </div>
                                                            <div class="row py-2">
                                                                <div class="col-md-4">
                                                                    <label>Secondary Border</label>
                                                                </div>
                                                                <div class="col-md-8">
                                                                        <div class="form-check form-check-inline">
                                                                          <input class="form-check-input secondary check-outline outline-secondary" type="radio" id="secondary-outline-radio" name="radio-secondary" value="option1">
                                                                          <label class="form-check-label" for="secondary-outline-radio">Default</label>
                                                                        </div>
                                                                        <div class="form-check form-check-inline">
                                                                          <input class="form-check-input secondary check-outline outline-secondary" type="radio" id="secondary2-outline-radio" name="radio-secondary" value="option1" checked="">
                                                                          <label class="form-check-label" for="secondary2-outline-radio">Checked</label>
                                                                        </div>
                                                                        <div class="form-check form-check-inline">
                                                                          <input class="form-check-input secondary check-outline outline-secondary" type="radio" id="secondary3-outline-radio" name="radio-secondary" value="option1" disabled="">
                                                                          <label class="form-check-label" for="secondary3-outline-radio">Disabled</label>
                                                                        </div>
                                                                </div>
                                                            </div>

Success

Default

Checked

Disabled

Danger

Default

Checked

Disabled

Warning

Default

Checked

Disabled

Primary

Default

Checked

Disabled

Secondary

Default

Checked

Disabled

Change State Buttons

Toggle buttons

                                                        
                                                           <div class="d-md-flex gap-2">
                                                                <div>
                                                                    <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
                                                                    <label class="btn btn-outline-primary font-weight-medium rounded-pill" for="btn-check">Single toggle</label>
                                                                </div>

                                                                <div>
                                                                    <input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
                                                                    <label class="btn btn-outline-info font-weight-medium rounded-pill" for="btn-check-2">Checked</label>
                                                                </div>
                                                                <div>
                                                                    <input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
                                                                    <label class="btn btn-outline-danger font-weight-medium rounded-pill" for="btn-check-3">Disabled</label>
                                                                </div>
                                                            </div>

Single toggle

Checked

Disabled

Radio toggle buttons

                                                        
                                                           <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
                                                            <label class="btn btn-outline-primary rounded-pill font-weight-medium" for="option1">Checked</label>

                                                            <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
                                                            <label class="btn btn-outline-warning rounded-pill font-weight-medium" for="option2">Radio</label>

                                                            <input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
                                                            <label class="btn btn-outline-info rounded-pill font-weight-medium" for="option3">Disabled</label>

                                                            <input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
                                                            <label class="btn btn-outline-danger rounded-pill font-weight-medium" for="option4">Radio</label>

Checked Radio Disabled Radio

Outlined styles

                                                        
                                                            <div class="d-inline-block">
                                                                <input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
                                                                <label class="btn btn-outline-primary mb-2 rounded-pill font-weight-medium" for="btn-check-outlined">Single toggle</label><br>

                                                                <input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
                                                                <label class="btn btn-outline-success mb-2 font-weight-medium rounded-pill" for="btn-check-2-outlined">Checked</label><br>

                                                                <input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
                                                                <label class="btn btn-outline-info mb-2 font-weight-medium rounded-pill" for="success-outlined">Checked success radio</label>

                                                                <input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
                                                                <label class="btn btn-outline-danger mb-2 font-weight-medium rounded-pill" for="danger-outlined">Danger radio</label>
                                                            </div>

Single toggle
Checked
Checked success radio Danger radio

Checkbox and Radio buttons

THIS MONTH

$58,356

LAST MONTH

$48,356

Checkboxes

Checks

Checks - Disabled

Checks - Colors

Checks - Light Colors

Checks - Outline Border Colors

Radios

Radios - Default

Radios - Disabled

Radio - Colors

Radios - Light Colors

Radios - Outline Border Colors

Change State Buttons

Toggle buttons

Radio toggle buttons

Outlined styles

Pavan kumar

Sonu Nigam

Arijit Sinh

Nirav Joshi

Sunil Joshi

Akshay Kumar

Pavan kumar

Varun Dhavan

Accordion Item #1

Accordion Item #2

Accordion Item #3

Luanch Admin

Event today

Settings

Pavan kumar

Pavan kumar

Sonu Nigam

Arijit Sinh

Pavan kumar

Checkbox and Radio buttons

THIS MONTH

$58,356

LAST MONTH

$48,356

Checkboxes

Checks

Checks - Disabled

Checks - Colors

Checks - Light Colors

Checks - Outline Border Colors

Radios

Radios - Default

Radios - Disabled

Radio - Colors

Radios - Light Colors

Radios - Outline Border Colors

Change State Buttons

Toggle buttons

Radio toggle buttons

Outlined styles

Pavan kumar

Sonu Nigam

Arijit Sinh

Nirav Joshi

Sunil Joshi

Akshay Kumar

Pavan kumar

Varun Dhavan