Kleon Admin Template

Form Inputs

Lorem ipsum dolor sit amet

Default Input

Use .form-control class to input

<form>
    <div class="form-group mb-0">
        <input type="text" class="form-control" >
    </div>
</form>

Helper Text

<form>
    <div class="form-group mb-0">
        <input type="text" class="form-control" >
        <small class="text-muted">Find helper text here for given textbox.</small>
    </div>
</form>

Password

<form>
    <div class="form-group mb-0">
        <input type="password" class="form-control" >
    </div>
</form>

Predefined Value

Add value="VALUE TEXT" to input

<form>
    <div class="form-group mb-0">
        <input type="password" class="form-control"  value="Set Value">
    </div>
</form>

Disabled Input

Add disabled attribute to input

<form>
    <div class="form-group mb-0">
        <input type="text" class="form-control"  value="Full Name" disabled>
    </div>
</form>

Readonly Input

Add readonly attribute to input

<form>
    <div class="form-group mb-0">
        <input type="text" class="form-control"  value="Full Name" readonly>
    </div>
</form>

Input with Placeholder

Add placeholder="..." attribute to input

<form>
    <div class="form-group mb-0">
        <input type="text" class="form-control"  placeholder="Full Name" >
    </div>
</form>

Maxlength Characters

Add maxlength="8" attribute to input

<form>
    <div class="form-group mb-0">
        <input type="text" class="form-control"  maxlength="8">
    </div>
</form>

Minlength Characters

Add minlength="5" attribute to input

<form method="post">
    <div class="form-group mb-2">
        <input type="text" class="form-control"  minlength="5" required>
    </div>
    <div class="form-group mb-0">
        <button type="submit" class="btn btn-primary px-3 py-1 fs-12 rounded-1">Submit</button>
    </div>
</form>

Input Type Options

Type Text

Use input type="text"

<form>
    <div class="form-group mb-0">
        <input type="text" class="form-control" >
    </div>
</form>

Type Email

Use input type="email"

<form>
    <div class="form-group mb-0">
        <input type="email" class="form-control"  placeholder="info@email.com">
    </div>
</form>

Type Password

Use input type="password"

<form>
    <div class="form-group mb-0">
        <input type="password" class="form-control"  value="1234" >
    </div>
</form>

Type Number

Use input type="number"

<form>
    <div class="form-group mb-0">
        <input type="number" class="form-control"  value="123456" >
    </div>
</form>

Type URL

Use input type="number"

<form>
    <div class="form-group mb-0">
        <input type="url" class="form-control"  value="https://www.kleon.com">
    </div>
</form>

Type Search

Use input type="search"

<form>
    <div class="form-group mb-0">
        <input type="search" class="form-control"  value="How to...">
    </div>
</form>

Type Date

Use input type="date"

<form>
    <div class="form-group mb-0">
        <input type="date" class="form-control"  value="01-Aug-2023">
    </div>
</form>

Type Time

Use input type="time"

<form>
    <div class="form-group mb-0">
        <input type="time" class="form-control"  value="10:05 AM">
    </div>
</form>

Type DateTime

Use input type="datetime-local"

<form>
    <div class="form-group mb-0">
        <input type="datetime-local" class="form-control" >
    </div>
</form>

Type Range

Use input type="range"

<form>
    <div class="form-group mb-0">
        <input type="range" class="form-range" name="range" value="">
    </div>
</form>

Type Color

Use input type="color"

<form>
    <div class="form-group mb-0">
        <input type="color" class="border-0 rounded-1 p-0 w-100"  value="#924AEF">
    </div>
</form>

Textarea

Default Textarea

<form>
    <div class="form-group mb-0">
        <textarea> class="form-control" ></textarea>
    </div>
</form>

Textarea with Placeholder

<form>
    <div class="form-group mb-0">
        <textarea> class="form-control"  placeholder="Enter Text..."></textarea>
    </div>
</form>

Floating Label

<form>
    <div class="form-group mb-0 form-floating">
        <textarea> class="form-control"  placeholder="Enter Text.."></textarea>
        <label class="form-label">Enter Text...</label>
    </div>
</form>

Max Length Characters (30)

<form>
    <div class="form-group mb-0">
        <textarea> class="form-control"  placeholder="Enter Text.." maxlength="30"></textarea>
    </div>
</form>

Checkbox

Basic Checkbox

Checked

Unchecked

Checked Disabled

Uncheck Disabled

<form>
    <div class="form-check">
        <label class="form-label mb-0" for="checkbox1">Checked</label>
        <input type="checkbox" class="form-check-input" id="checkbox1"  value="" checked>
    </div>                                
    <div class="form-check">
        <label class="form-label mb-0" for="checkbox2">Unchecked</label>
        <input type="checkbox" class="form-check-input" id="checkbox2"  value="">
    </div>
    <div class="form-check">
        <label class="form-label mb-0" for="checkbox3">Checked Disabled</label>
        <input type="checkbox" class="form-check-input" id="checkbox3"  value="" checked disabled>
    </div>
    <div class="form-check">
        <label class="form-label mb-0" for="checkbox4">Uncheck Disabled</label>
        <input type="checkbox" class="form-check-input" id="checkbox4"  value="" disabled>
    </div>
</form>

Inline Checkbox

Use .form-check-inline to any .form-check

<form>
    <div class="form-check form-check-inline">
        <label class="form-label mb-0" for="checkbox11">01</label>
        <input type="checkbox" class="form-check-input" id="checkbox11"  value="">
    </div>                                
    <div class="form-check form-check-inline">
        <label class="form-label mb-0" for="checkbox12">02</label>
        <input type="checkbox" class="form-check-input" id="checkbox12"  value="">
    </div>
    <div class="form-check form-check-inline">
        <label class="form-label mb-0" for="checkbox13">03</label>
        <input type="checkbox" class="form-check-input" id="checkbox13"  value="">
    </div>
    <div class="form-check form-check-inline">
        <label class="form-label mb-0" for="checkbox14">04</label>
        <input type="checkbox" class="form-check-input" id="checkbox14"  value="">
    </div>
</form>

Colored Checkbox

Primary

Secondary (Checked & Disabled)

Success

Danger (Unchecked & Disabled)

Warning

Info

<form>
    <div class="form-check">
        <label class="form-label mb-0" for="checkbox1">Primary</label>
        <input type="checkbox" class="form-check-input bg-primary border-0" name="checkbox1" checked value="">
    </div>
    <div class="form-check">
        <label class="form-label mb-0" for="checkbox1">Secondary (Checked & Disabled)</label>
        <input type="checkbox" class="form-check-input bg-secondary border-0" name="checkbox1" checked disabled value="">
    </div>
    <div class="form-check">
        <label class="form-label mb-0" for="checkbox1">Success</label>
        <input type="checkbox" class="form-check-input bg-success border-0" name="checkbox1" unchecked value="">
    </div>
    <div class="form-check">
        <label class="form-label mb-0" for="checkbox1">Danger (Unchecked & Disabled)</label>
        <input type="checkbox" class="form-check-input bg-danger border-0" name="checkbox1" unchecked disabled value="">
    </div>
    <div class="form-check">
        <label class="form-label mb-0" for="checkbox1">Warning</label>
        <input type="checkbox" class="form-check-input bg-warning border-0" name="checkbox1" checked value="">
    </div> 
    <div class="form-check">
        <label class="form-label mb-0" for="checkbox1">Info</label>
        <input type="checkbox" class="form-check-input bg-info border-0" name="checkbox1" checked value="">
    </div> 
</form>

Checkbox Toggle Buttons (Solid & Outline)

<form>
    <div class="form-check form-check-inline">
        <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
        <label class="btn btn-primary" for="btn-check">Single toggle</label>
    </div>
    <div class="form-check form-check-inline">
        <input type="checkbox" class="btn-check" id="btn-check-2" autocomplete="off" checked>
        <label class="btn btn-primary" for="btn-check-2">Checked</label>
    </div>
    <div class="form-check form-check-inline">
        <input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
        <label class="btn btn-primary" for="btn-check-3">Disabled</label>
    </div>
</form>
<!-- Outline  -->
<form>
    <div class="form-check form-check-inline">
        <input type="checkbox" class="btn-check" id="btn-check4" autocomplete="off">
        <label class="btn btn-outline-secondary" for="btn-check4">Single toggle</label>
    </div>
    <div class="form-check form-check-inline">
        <input type="checkbox" class="btn-check" id="btn-check-5" autocomplete="off" checked>
        <label class="btn btn-outline-secondary" for="btn-check-5">Checked</label>
    </div>
    <div class="form-check form-check-inline">
        <input type="checkbox" class="btn-check" id="btn-check-6" autocomplete="off" disabled>
        <label class="btn btn-outline-secondary" for="btn-check-6">Disabled</label>
    </div>
</form>

Radio

Basic Radio

<form>
    <div class="form-check">
        <input type="radio" class="form-check-input" id="radio1" name="radio" value="">
        <label class="form-label mb-0" for="radio1">HTML</label><br>
    </div>                                
    <div class="form-check">
        <input type="radio" class="form-check-input" id="radio2" name="radio" value="">
        <label class="form-label mb-0" for="radio2">CSS</label><br>
    </div>
    <div class="form-check">
        <input type="radio" class="form-check-input" id="radio3" name="radio" value="">
        <label class="form-label mb-0" for="radio3">JS</label><br>
    </div>
</form>

Inline Radio

Use .form-check-inline to any .form-check

<form>
    <div class="form-check form-check-inline">
        <input type="radio" class="form-check-input" id="radio10" name="radio" value="">
        <label class="form-label mb-0" for="radio10">HTML</label><br>
    </div>                                
    <div class="form-check form-check-inline">
        <input type="radio" class="form-check-input" id="radio11" name="radio" value="">
        <label class="form-label mb-0" for="radio11">CSS</label><br>
    </div>
    <div class="form-check form-check-inline">
        <input type="radio" class="form-check-input" id="radio12" name="radio" value="">
        <label class="form-label mb-0" for="radio12">JS</label><br>
    </div>
</form>

Colored Radio

HTML

CSS

Figma

React

Wordpress

<form>
    <div class="form-check">
        <input type="radio" class="form-check-input bg-primary border-0" id="radio4" name="radio" value="">
        <label class="form-label mb-0" for="radio4">HTML</label><br>
    </div>
    <div class="form-check">
        <input type="radio" class="form-check-input bg-secondary border-0" id="radio5" name="radio" value="">
        <label class="form-label mb-0" for="radio5">CSS</label><br>
    </div>
    <div class="form-check">
        <input type="radio" class="form-check-input bg-success border-0" id="radio6" name="radio" value="">
        <label class="form-label mb-0" for="radio6">JS</label><br>
    </div>
    <div class="form-check">
        <input type="radio" class="form-check-input bg-danger border-0" id="radio7" name="radio" value="">
        <label class="form-label mb-0" for="radio7">Figma</label><br>
    </div>
    <div class="form-check">
        <input type="radio" class="form-check-input bg-warning border-0" id="radio8" name="radio" value="">
        <label class="form-label mb-0" for="radio8">React</label><br>
    </div>
    <div class="form-check">
        <input type="radio" class="form-check-input bg-info border-0" id="radio9" name="radio" value="">
        <label class="form-label mb-0" for="radio9">Wordpress</label><br>
    </div>
</form>

Radio Toggle Buttons

<form>
    <div class="form-check form-check-inline">
        <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
        <label class="btn btn-secondary" for="option1">Checked</label>
    </div>
    <div class="form-check form-check-inline">
        <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
        <label class="btn btn-secondary" for="option2">Radio</label>
    </div>
    <div class="form-check form-check-inline">
        <input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
        <label class="btn btn-secondary" for="option3">Disabled</label>
    </div>
    <div class="form-check form-check-inline">
        <input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
        <label class="btn btn-secondary" for="option4">Radio</label>
    </div>
</form>

<!-- Outline -->
<form>
    <div class="form-check form-check-inline">
        <input type="radio" class="btn-check" name="options" id="option5" autocomplete="off" checked>
        <label class="btn btn-outline-warning" for="option5">Checked</label>
    </div>
    <div class="form-check form-check-inline">
        <input type="radio" class="btn-check" name="options" id="option6" autocomplete="off">
        <label class="btn btn-outline-warning" for="option6">Radio</label>
    </div>
    <div class="form-check form-check-inline">
        <input type="radio" class="btn-check" name="options" id="option7" autocomplete="off" disabled>
        <label class="btn btn-outline-warning" for="option7">Disabled</label>
    </div>
    <div class="form-check form-check-inline">
        <input type="radio" class="btn-check" name="options" id="option8" autocomplete="off">
        <label class="btn btn-outline-warning" for="option8">Radio</label>
    </div>
</form>

Switch

Basic Switch

<form>
    <div class="form-switch">
        <input type="checkbox" class="form-check-input" id="customSwitch1">
        <label class="form-label mb-0" for="customSwitch1">Toggle this switch element</label>
    </div>                                
    <div class="form-switch">
        <input type="checkbox" class="form-check-input" disabled id="customSwitch2">
        <label class="form-label mb-0" for="customSwitch2">Disabled switch element</label>
    </div>
</form>

Colored Switch (Checked All)

Primary

Secondary

Success

Danger

Warning

Info

<form>
    <div class="form-switch">
        <input type="checkbox" class="form-check-input bg-primary border-0" id="primary" checked>
        <label class="form-label mb-0" for="primary">Primary</label>
    </div>
    <div class="form-switch">
        <input type="checkbox" class="form-check-input bg-secondary border-0" id="secondary" checked>
        <label class="form-label mb-0" for="secondary">Secondary</label>
    </div> 
    <div class="form-switch">
        <input type="checkbox" class="form-check-input bg-success border-0" id="success" checked>
        <label class="form-label mb-0" for="success">Success</label>
    </div>
    <div class="form-switch">
        <input type="checkbox" class="form-check-input bg-danger border-0" id="danger" checked>
        <label class="form-label mb-0" for="danger">Danger</label>
    </div> 
    <div class="form-switch">
        <input type="checkbox" class="form-check-input bg-warning border-0" id="warning" checked>
        <label class="form-label mb-0" for="warning">Warning</label>
    </div>
    <div class="form-switch">
        <input type="checkbox" class="form-check-input bg-info border-0" id="info" checked>
        <label class="form-label mb-0" for="info">Info</label>
    </div> 
</form>

Notifications View All

Jackie Kun mentioned you at Kleon Projects

Olivia Johanna has created new task at Kleon Projects

[REMINDER] Due date of Highspeed Studios Projects te task will be coming

Franklin Jr.

Notifications View All

Jackie Kun mentioned you at Kleon Projects

Olivia Johanna has created new task at Kleon Projects

[REMINDER] Due date of Highspeed Studios Projects te task will be coming

Franklin Jr.

Notifications View All

Jackie Kun mentioned you at Kleon Projects

Olivia Johanna has created new task at Kleon Projects

[REMINDER] Due date of Highspeed Studios Projects te task will be coming

Franklin Jr.

Notifications View All

Jackie Kun mentioned you at Kleon Projects

Olivia Johanna has created new task at Kleon Projects

[REMINDER] Due date of Highspeed Studios Projects te task will be coming

Franklin Jr.

Notifications View All

Jackie Kun mentioned you at Kleon Projects

Olivia Johanna has created new task at Kleon Projects

[REMINDER] Due date of Highspeed Studios Projects te task will be coming

Notifications

Review New Candidate Application

Your Premium service end soon. Renew your service

You got New 10 Appilcation. Check Now

Schedule

Franklin Jr.

Notifications View All

Jackie Kun mentioned you at Kleon Projects

Olivia Johanna has created new task at Kleon Projects

[REMINDER] Due date of Highspeed Studios Projects te task will be coming

Franklin Jr.

Main Menu

Boost your work

Kleon Admin Dashboard

Made with by WPThemeBooster

Theme Customizer

Theme Color Mode

Navigation Layout

Vertical Navigation Styles

Header Position

Topbar Style

Form Inputs

Default Input

Helper Text

Password

Predefined Value

Disabled Input

Readonly Input

Input with Placeholder

Maxlength Characters

Minlength Characters

Input Type Options

Type Text

Type Email

Type Password

Type Number

Type URL

Type Search

Type Date

Type Time

Type DateTime

Type Range

Type Color

Textarea

Default Textarea

Textarea with Placeholder

Floating Label

Max Length Characters (30)

Checkbox

Basic Checkbox

Inline Checkbox

Colored Checkbox

Checkbox Toggle Buttons (Solid & Outline)

Radio

Basic Radio

Inline Radio