Activity Stream
Report-Fix / Update

Add 3 files to Tasks

Monday , 4:24 PM
Project Status

Marked Design as Completed

Monday , 3:00 PM
UI
Larkon Application UI v2.0.0 Latest

Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.

Monday , 2:10 PM
avatar-5
Alex Smith Attached Photos
Monday 1:00 PM
avatar-5
Rebecca J. added a new team member

Added a new member to Front Dashboard

Monday 10:00 AM
Achievements

Earned a " Best Product Award"

Monday 9:30 AM
View All
Theme Settings
Color Scheme
Topbar Color
Menu Color
Sidebar Size
Checkbox#

Each checkbox and radio <input> and <label> pairing is wrapped in a <div> to create our custom control. Structurally, this is the same approach as our default .form-check.

html
                                                       
                                                            <div class="form-check">
                                                                 <input type="checkbox" class="form-check-input" id="customCheck1">
                                                                 <label class="form-check-label" for="customCheck1">Check this custom checkbox</label>
                                                            </div>
                                                            <div class="form-check">
                                                                 <input type="checkbox" class="form-check-input" id="customCheck2">
                                                                 <label class="form-check-label" for="customCheck2">Check this custom checkbox</label>
                                                            </div>
                                                       
                                                  
Inline Checkbox#
html
                                                       
                                                            <div class="form-check form-check-inline">
                                                                 <input type="checkbox" class="form-check-input" id="customCheck3">
                                                                 <label class="form-check-label" for="customCheck3">Check this custom checkbox</label>
                                                            </div>
                                                            <div class="form-check form-check-inline">
                                                                 <input type="checkbox" class="form-check-input" id="customCheck4">
                                                                 <label class="form-check-label" for="customCheck4">Check this custom checkbox</label>
                                                            </div>
                                                       
                                                  
Disabled Checkbox#
html
                                                       
                                                            <div class="form-check form-check-inline">
                                                                 <input type="checkbox" class="form-check-input" id="customCheck5" checked disabled>
                                                                 <label class="form-check-label" for="customCheck5">Check this custom checkbox</label>
                                                            </div>
                                                            <div class="form-check form-check-inline">
                                                                 <input type="checkbox" class="form-check-input" id="customCheck6" disabled>
                                                                 <label class="form-check-label" for="customCheck6">Check this custom checkbox</label>
                                                            </div>
                                                       
                                                  
Colors Checkbox#
html
                                                       
                                                            <div class="form-check mb-2">
                                                                 <input type="checkbox" class="form-check-input" id="customCheckcolor1" checked>
                                                                 <label class="form-check-label" for="customCheckcolor1">Default Checkbox</label>
                                                            </div>
                                                            <div class="form-check form-checkbox-success mb-2">
                                                                 <input type="checkbox" class="form-check-input" id="customCheckcolor2" checked>
                                                                 <label class="form-check-label" for="customCheckcolor2">Success Checkbox</label>
                                                            </div>
                                                            <div class="form-check form-checkbox-info mb-2">
                                                                 <input type="checkbox" class="form-check-input" id="customCheckcolor3" checked>
                                                                 <label class="form-check-label" for="customCheckcolor3">Info Checkbox</label>
                                                            </div>
                                                            <div class="form-check form-checkbox-secondary mb-2">
                                                                 <input type="checkbox" class="form-check-input" id="customCheckcolor6" checked>
                                                                 <label class="form-check-label" for="customCheckcolor6">Secondary Checkbox</label>
                                                            </div>
                                                            <div class="form-check form-checkbox-warning mb-2">
                                                                 <input type="checkbox" class="form-check-input" id="customCheckcolor4" checked>
                                                                 <label class="form-check-label" for="customCheckcolor4">Warning Checkbox</label>
                                                            </div>
                                                            <div class="form-check form-checkbox-danger mb-2">
                                                                 <input type="checkbox" class="form-check-input" id="customCheckcolor5" checked>
                                                                 <label class="form-check-label" for="customCheckcolor5">Danger Checkbox</label>
                                                            </div>
                                                            <div class="form-check form-checkbox-dark">
                                                                 <input type="checkbox" class="form-check-input" id="customCheckcolor7" checked>
                                                                 <label class="form-check-label" for="customCheckcolor7">Dark Checkbox</label>
                                                            </div>
                                                       
                                                  
Radio#

Each Radio <input> and <label> pairing is wrapped in a <div> to create our custom control. Structurally, this is the same approach as our default .form-check.

html
                                                       
                                                            <div class="form-check">
                                                                 <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>
                                                       
                                                  
Inline Radio#
html
                                                       
                                                            <div class="form-check form-check-inline">
                                                                 <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                                                                 <label class="form-check-label" for="inlineRadio1">Check this custom checkbox</label>
                                                            </div>
                                                            <div class="form-check form-check-inline">
                                                                 <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                                                                 <label class="form-check-label" for="inlineRadio2">Check this custom checkbox</label>
                                                            </div>
                                                       
                                                  
Disabled Radio#
html
                                                       
                                                            <div class="form-check form-check-inline">
                                                                 <input type="radio" class="form-check-input" id="customCheck5" checked disabled>
                                                                 <label class="form-check-label" for="customCheck5">Check this custom checkbox</label>
                                                            </div>
                                                            <div class="form-check form-check-inline">
                                                                 <input type="radio" class="form-check-input" id="customCheck6" disabled>
                                                                 <label class="form-check-label" for="customCheck6">Check this custom checkbox</label>
                                                            </div>
                                                       
                                                  
Colors Radio#
html
                                                       
                                                            <div class="form-check mb-2">
                                                                 <input type="radio" id="customRadiocolor1" name="customRadiocolor1" class="form-check-input" checked>
                                                                 <label class="form-check-label" for="customRadiocolor1">Default Radio</label>
                                                            </div>
                                                            <div class="form-check form-radio-success mb-2">
                                                                 <input type="radio" id="customRadiocolor2" name="customRadiocolor2" class="form-check-input" checked>
                                                                 <label class="form-check-label" for="customRadiocolor2">Success Radio</label>
                                                            </div>
                                                            <div class="form-check form-radio-info mb-2">
                                                                 <input type="radio" id="customRadiocolor3" name="customRadiocolor3" class="form-check-input" checked>
                                                                 <label class="form-check-label" for="customRadiocolor3">Info Radio</label>
                                                            </div>
                                                            <div class="form-check form-radio-secondary mb-2">
                                                                 <input type="radio" id="customRadiocolor6" name="customRadiocolor6" class="form-check-input" checked>
                                                                 <label class="form-check-label" for="customRadiocolor6">Secondary Radio</label>
                                                            </div>
                                                            <div class="form-check form-radio-warning mb-2">
                                                                 <input type="radio" id="customRadiocolor4" name="customRadiocolor4" class="form-check-input" checked>
                                                                 <label class="form-check-label" for="customRadiocolor4">Warning Radio</label>
                                                            </div>
                                                            <div class="form-check form-radio-danger mb-2">
                                                                 <input type="radio" id="customRadiocolor5" name="customRadiocolor5" class="form-check-input" checked>
                                                                 <label class="form-check-label" for="customRadiocolor5">Danger Radio</label>
                                                            </div>
                                                            <div class="form-check form-radio-dark">
                                                                 <input type="radio" id="customRadiocolor7" name="customRadiocolor7" class="form-check-input" checked>
                                                                 <label class="form-check-label" for="customRadiocolor7">Dark Radio</label>
                                                            </div>
                                                       
                                                  
Switch#

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Switches also support the disabled attribute.

html
                                                       
                                                            <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>
                                                            <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>
                                                       
                                                  
© Larkon. Crafted by Techzaa