Forms

Input Types

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

<!-- text input -->
<input class="form-control" type="text" id="text-input" placeholder="Text input">

<!-- valid input -->
<input type="text" class="form-control is-valid" id="inputSuccess1" placeholder="Success">

<!-- invalid input -->
<input type="text" class="form-control is-invalid" id="inputDanger1" placeholder="Danger">

<!-- number input -->
<input class="form-control" type="number" value="47" id="number-input">

<!-- input with icon -->
<div class="input-group mb-0">
    <div class="input-group-prepend">
        <span class="input-group-text"><i class="bi-send text-primary"></i></span>
    </div>
    <input type="text" class="form-control w-icon-left" placeholder="Input with icon">
</div><!-- / input-group -->


<!-- password input -->
<input type="password" class="form-control" placeholder="Password" id="password-input">

<!-- select -->
<select class="custom-select" id="c-select">
    <option>Select</option>
    <option>Miami</option>
    <option>New York</option>
    <option>Dubai</option>
    <option>Singapore</option>
    <option>Tokyo</option>
</select><!-- / custom-select -->

<!-- multiple-selector -->
<select multiple="" class="form-control multiple-selector" id="multiple-select">
    <option>Multiple Select</option>
    <option>Miami</option>
    <option>New York</option>
    <option>Dubai</option>
    <option>Singapore</option>
    <option>Tokyo</option>
</select>

Checkbox

Custom checkboxes in .btn-groups, colors can be set by adding .checkbox-*color after the .checkbox class.

Checkbox Colors
Checkbox States
<!-- checkbox colors -->
<div class="btn-group checkbox-group">
    <div class="checkbox checkbox-primary">
        <label class="hidden"><input type="checkbox"></label>
        <input id="checkbox1" type="checkbox" checked="">
        <label for="checkbox1">Primary</label>
    </div><!-- / checbox -->
</div><!-- / btn-group -->
<div class="btn-group checkbox-group">
    <div class="checkbox checkbox-success">
        <label class="hidden"><input type="checkbox"></label>
        <input id="checkbox2" type="checkbox" checked="">
        <label for="checkbox2">Success</label>
    </div><!-- / checbox -->
</div><!-- / btn-group -->
<div class="btn-group checkbox-group">
    <div class="checkbox checkbox-info">
        <label class="hidden"><input type="checkbox"></label>
        <input id="checkbox3" type="checkbox" checked="">
        <label for="checkbox3">Info</label>
    </div><!-- / checbox -->
</div><!-- / btn-group -->
<div class="btn-group checkbox-group">
    <div class="checkbox checkbox-warning">
        <label class="hidden"><input type="checkbox"></label>
        <input id="checkbox4" type="checkbox" checked="">
        <label for="checkbox4">Warning</label>
    </div><!-- / checbox -->
</div><!-- / btn-group -->
<div class="btn-group checkbox-group">
    <div class="checkbox checkbox-danger">
        <label class="hidden"><input type="checkbox"></label>
        <input id="checkbox5" type="checkbox" checked="">
        <label for="checkbox5">Danger</label>
    </div><!-- / checbox -->
</div><!-- / btn-group -->

<!-- checkbox states -->
<div class="btn-group d-block mb-20 m-x-10">
    <div class="checkbox checkbox-secondary">
        <label class="hidden"><input type="checkbox"></label>
        <input id="checkbox6" type="checkbox">
        <label for="checkbox6">Unchecked</label>
    </div><!-- / checkbox -->
</div><!-- / btn-group -->
<div class="btn-group d-block mb-20 m-x-10">
    <div class="checkbox checkbox-secondary">
        <label class="hidden"><input type="checkbox"></label>
        <input id="checkbox7" type="checkbox" checked="">
        <label for="checkbox7">Checked</label>
    </div><!-- / checkbox -->
</div><!-- / btn-group -->
<div class="btn-group d-block mb-20 m-x-10">
    <div class="checkbox checkbox-secondary">
        <label class="hidden"><input type="checkbox"></label>
        <input id="checkbox8" type="checkbox" disabled="">
        <label for="checkbox8">Disabled</label>
    </div><!-- / checkbox -->
</div><!-- / btn-group -->
<div class="btn-group d-block m-x-10">
    <div class="checkbox checkbox-secondary">
        <label class="hidden"><input type="checkbox"></label>
        <input id="checkbox9" type="checkbox" checked="" disabled="">
        <label for="checkbox9">Checked Disabled</label>
    </div><!-- / checkbox -->
</div><!-- / btn-group -->

Radio

Custom radios in .btn-groups, colors can be set by adding .radio-*color after the .radio class.

Radio States
<!-- radio colors -->
<div class="btn-group checkbox-group">
    <div class="radio radio-primary">
        <label class="hidden"><input type="radio"></label>
        <input type="radio" name="radio1" id="radio1" value="option1" checked="">
        <label for="radio1">
            <span>Primary</span>
        </label>
    </div><!-- / radio -->
</div><!-- / btn-group -->
<div class="btn-group checkbox-group">
    <div class="radio radio-success">
        <label class="hidden"><input type="radio"></label>
        <input type="radio" name="radio2" id="radio2" value="option2" checked="">
        <label for="radio2">
            <span>Success</span>
        </label>
    </div><!-- / radio -->
</div><!-- / btn-group -->
<div class="btn-group checkbox-group">
    <div class="radio radio-info">
        <label class="hidden"><input type="radio"></label>
        <input type="radio" name="radio3" id="radio3" value="option3" checked="">
        <label for="radio3">
            <span>Info</span>
        </label>
    </div><!-- / radio -->
</div><!-- / btn-group -->
<div class="btn-group checkbox-group">
    <div class="radio radio-warning">
        <label class="hidden"><input type="radio"></label>
        <input type="radio" name="radio4" id="radio4" value="option4" checked="">
        <label for="radio4">
            <span>Warning</span>
        </label>
    </div><!-- / radio -->
</div><!-- / btn-group -->
<div class="btn-group checkbox-group">
    <div class="radio radio-danger">
        <label class="hidden"><input type="radio"></label>
        <input type="radio" name="radio5" id="radio5" value="option5" checked="">
        <label for="radio5">
            <span>Danger</span>
        </label>
    </div><!-- / radio -->
</div><!-- / btn-group -->

<!-- radio states -->
<div class="btn-group d-block mb-20 m-x-10">
    <div class="radio radio-secondary">
        <label class="hidden"><input type="radio"></label>
        <input type="radio" name="radio6" id="radio6" value="option6">
        <label for="radio6">
            <span>Unchecked</span>
        </label>
    </div><!-- / radio -->
</div><!-- / btn-group -->
<div class="btn-group d-block mb-20 m-x-10">
    <div class="radio radio-secondary">
        <label class="hidden"><input type="radio"></label>
        <input type="radio" name="radio6" id="radio7" value="option7" checked="">
        <label for="radio7">
            <span>Checked</span>
        </label>
    </div><!-- / radio -->
</div><!-- / btn-group -->

<div class="btn-group d-block mb-20 m-x-10">
    <div class="radio radio-secondary">
        <label class="hidden"><input type="radio"></label>
        <input type="radio" name="radio8" id="radio8" value="option8" disabled="">
        <label for="radio8">
            <span>Disabled</span>
        </label>
    </div><!-- / radio -->
</div><!-- / btn-group -->

<div class="btn-group d-block mb-20 m-x-10">
    <div class="radio radio-secondary">
        <label class="hidden"><input type="radio"></label>
        <input type="radio" name="radio9" id="radio9" value="option9" checked="" disabled="">
        <label for="radio9">
            <span>Checked Disabled</span>
        </label>
    </div><!-- / radio -->
</div><!-- / btn-group -->

Switches

Custom-designed switches with different colors, the colors can be set by adding .*color-switch after the .onoffswitch-inner and to the .onoffswitch-switch class.

Default States
Colors
Icon Switches
<!-- default switch -->
<div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch25" checked="">
    <label class="onoffswitch-label" for="myonoffswitch25">
        <span class="onoffswitch-inner primary-switch"></span>
        <span class="onoffswitch-switch primary-switch"></span>
    </label>
</div><!-- / onoffswitch -->
<div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch26">
    <label class="onoffswitch-label" for="myonoffswitch26">
        <span class="onoffswitch-inner primary-switch"></span>
        <span class="onoffswitch-switch primary-switch"></span>
    </label>
</div><!-- / onoffswitch -->

<!-- default icon switch -->
<div class="onoffswitch icon-switch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch13" checked="">
    <label class="onoffswitch-label" for="myonoffswitch13">
        <span class="onoffswitch-inner"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div><!-- / onoffswitch -->

Pill Switches

Pill shape switches with different colors, the colors can be set by adding .*color-switch after the .onoffswitch-inner and to the .onoffswitch-switch class.

Pill States
Pill Colors
Pill Icon Switches
<!-- pill switch -->
<div class="onoffswitch2">
    <input type="checkbox" name="onoffswitch2" class="onoffswitch2-checkbox" id="myonoffswitch27" checked="">
    <label class="onoffswitch2-label" for="myonoffswitch27">
        <span class="onoffswitch2-inner primary-switch"></span>
        <span class="onoffswitch2-switch"></span>
    </label>
</div><!-- / onoffswitch -->
<div class="onoffswitch2">
    <input type="checkbox" name="onoffswitch" class="onoffswitch2-checkbox" id="myonoffswitch28">
    <label class="onoffswitch2-label" for="myonoffswitch28">
        <span class="onoffswitch2-inner primary-switch"></span>
        <span class="onoffswitch2-switch"></span>
    </label>
</div><!-- / onoffswitch -->

<!-- pill icon switch -->
<div class="onoffswitch2 icon-switch">
    <input type="checkbox" name="onoffswitch2" class="onoffswitch2-checkbox" id="myonoffswitch19" checked="">
    <label class="onoffswitch2-label" for="myonoffswitch19">
        <span class="onoffswitch2-inner"></span>
        <span class="onoffswitch2-switch"></span>
    </label>
</div><!-- / onoffswitch -->

Contact Form

Contact Form with validation.

<form class="needs-validation" id="form-validation" novalidate="novalidate">
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <input type="text" class="form-control" id="contact-name" name="inputName" placeholder="Full Name" required="">
            </div><!-- / form-group -->
        </div><!-- / column -->

        <div class="col-md-6">
            <div class="form-group">
                <input type="email" class="form-control" id="contact-email" name="inputEmail" placeholder="Email" required="">
            </div><!-- / form-group -->
        </div><!-- / column -->

        <div class="col-md-6">
            <div class="form-group">
                <input type="text" class="form-control" id="contact-subject" name="inputSubject" placeholder="Subject">
            </div><!-- / form-group -->
        </div><!-- / column -->

        <div class="col-md-6">
            <div class="form-group">
                <select class="custom-select" id="contact-select" name="inputSelect">
                    <option value="presale">Presale</option>
                    <option value="account">Account</option>
                    <option value="support">Support</option>
                </select>
            </div><!-- / form-group -->
        </div><!-- / column -->
    </div><!-- / row -->
    <div class="form-group">
        <textarea id="contact-message" class="form-control" name="inputMessage" rows="5" placeholder="Message" required=""></textarea>
    </div>
    <button type="submit" class="btn btn-primary btn-submit">Send Message</button> 
</form><!-- / form-group -->

Login Form

Login Form with validation.

<form class="needs-validation" id="login-form" novalidate="novalidate">
    <div class="form-group">
        <input type="text" class="form-control" name="usernameLogin" placeholder="Username" required="">
    </div><!-- / form-group -->

    <div class="form-group">
        <input type="password" class="form-control" name="passwordLogin" placeholder="Password" required="">
    </div><!-- / form-group -->

    <div class="row v-center mt-15">
        <div class="col-lg-7 tablet-lg-top">
            <div class="checkbox checkbox-primary ml-10">
                <label class="hidden"><input type="checkbox"></label>
                <input id="checkbox-login" type="checkbox">
                <label for="checkbox-login"><span>Remember Me</span></label>
            </div><!-- / checkbox -->
        </div><!-- / column -->
        <div class="col-lg-5 text-right">
            <button type="submit" class="btn btn-primary tablet-lg-fw"><i class="bi-unlock mr-5"></i> <span>Sign In</span></button>
        </div><!-- / column -->
    </div><!-- / row -->
</form><!-- / login-form -->

Register Form

Register Form with validation.

<form class="needs-validation" id="register-form" novalidate="novalidate">
    <div class="form-group">
        <input type="email" class="form-control" name="emailRegister" placeholder="Email" required="">
    </div><!-- / form-group -->
    <div class="form-group">
        <input type="text" class="form-control" name="usernameRegister" placeholder="Username" required="">
    </div><!-- / form-group -->
    <div class="form-group">
        <input type="password" id="passwordRegister" class="form-control" name="passwordRegister" placeholder="Password" required="">
    </div><!-- / form-group -->
    <div class="form-group">
        <input type="password" class="form-control" name="passwordRegisterConfirm2" placeholder="Confirm Password" required="">
    </div><!-- / form-group -->

    <div class="row v-center">
        <div class="col-xl-7 tablet-xl-top">
            <div class="checkbox checkbox-primary ml-10">
                <label class="hidden"><input type="checkbox"></label>
                <input id="checkbox-register" type="checkbox">
                <label for="checkbox-register"><span> Accept <a href="#x">Terms & Conditions</a></span></label>
            </div><!-- / checkbox -->
        </div><!-- / column -->

        <div class="col-xl-5 text-right">
            <button type="submit" class="btn btn-primary tablet-xl-fw"><i class="bi-person-plus mr-5"></i> <span>Register</span></button>
        </div><!-- / column -->
    </div><!-- / row -->
</form><!-- / register-form -->
LAYOUTS
Default Layout
Layout Right Side-Nav
Layout Detached Left Side-Nav
Layout Detached Right Side-Nav