Forms

Use Pixels’s form elements such as text inputs, textareas, file uploads and many more to get input from you users

Form example

The following example is a classical form for login or register pages:

We'll never share your email with anyone else. 
<form action="#" class="w-75">
    <div class="form-group mb-3">
        <label for="email">Email address</label>
        <input type="email" class="form-control" id="email" aria-describedby="emailHelp">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group mb-3">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password">
    </div>
    <div class="form-check square-check mb-3">
        <input class="form-check-input" type="checkbox" value="" id="remember">
        <label class="form-check-label" for="remember">
            Remember me
        </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Input with icon

Create input elements with icons using the following morkup:

<div class="form-group">
    <label for="exampleInputIcon1">Icon Left</label>
    <div class="input-group mb-4">
        <div class="input-group-prepend">
            <span class="input-group-text"><span class="fas fa-search"></span></span>
        </div>
        <input class="form-control" id="exampleInputIcon1" placeholder="Icon Left" type="text" aria-label="Input with icon left">
    </div>
</div>
<div class="form-group">
    <label for="exampleInputIcon2">Icon Right</label>
    <div class="input-group mb-4">
        <input class="form-control" id="exampleInputIcon2" placeholder="Icon Right" aria-label="Input group" type="text">
        <div class="input-group-append">
            <span class="input-group-text"><span class="fas fa-search"></span></span>
        </div>
    </div>
</div>

Validation

Use the following modifier classes to add success or error states to form elements:

Looks good!
Please choose a username. 
<div class="form-group">
    <label for="validationServer01">First name</label>
    <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
    <div class="valid-feedback">
        Looks good!
    </div>                
</div>
<div class="form-group mb-4">
    <label for="validationServerUsername">Username</label>
    <input type="text" class="form-control is-invalid" id="validationServerUsername" required>
    <div class="invalid-feedback">
        Please choose a username.
    </div>               
</div>

Select input

The following example is how the select inputs look and can be used:

<div class="form-group">
    <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Country</label>
    <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
        <option selected>Choose...</option>
        <option value="1">United States</option>
        <option value="2">Germany</option>
        <option value="3">Canada</option>
    </select>
</div>

Multiple select

The following example is how the select inputs look and can be used:

<div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="custom-select" id="exampleFormControlSelect2">
    <option>Bootstrap</option>
    <option>VueJs</option>
    <option>Angular</option>
    <option>React</option>
    <option>NodeJs</option>
    </select>
</div>

Textarea

The following example is how textareas can be used:

<div class="form-group">
    <label for="exampleFormControlTextarea2">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea2" rows="3"></textarea>
</div>

File upload

The following example is how file uploads can be used:

<div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Checkboxes

Square style

Use the .form-check and .square-check modifier classes to make checkboxes squared:

<div class="form-check square-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck111" checked>
    <label class="form-check-label" for="defaultCheck111">
        Active checkbox
    </label>
</div>
<div class="form-check square-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck222">
    <label class="form-check-label" for="defaultCheck222">
        Option 1 
    </label>
</div>
<div class="form-check square-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck333">
    <label class="form-check-label" for="defaultCheck333">
        Option 2 
    </label>
</div>
<div class="form-check square-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck444" disabled>
    <label class="form-check-label" for="defaultCheck444">
        Disabled checkbox
    </label>
</div>

Round style

Use the .form-check modifier class to make checkboxes rounded:

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck555" checked>
    <label class="form-check-label" for="defaultCheck555">
        Active checkbox
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck666">
    <label class="form-check-label" for="defaultCheck666">
        Option 1 
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck777">
    <label class="form-check-label" for="defaultCheck777">
        Option 2 
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck888" disabled>
    <label class="form-check-label" for="defaultCheck888">
        Disabled checkbox
    </label>
</div>

Radio buttons

Here are a few radio button examples with a variety of stateS:

Radios 
<fieldset>
    <legend class="h6">Radios</legend>
    <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>
</fieldset>

Switches

Use these custom switches to add toggle functionality for your website:

<div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="customSwitch1">
    <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
    </div>
    <div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
    <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

Range slider Pro

Use the following markup to create range sliders:

<div class="row mb-4 mb-lg-5">
    <div class="col-12 col-md-6">
        <!-- Simple slider -->
        <div class="input-slider-container">
            <div id="input-slider-forms" class="input-slider" data-range-value-min="100" data-range-value-max="500"></div>
            <!-- Input slider values -->
            <div class="row mt-3 d-none">
                <div class="col-6">
                    <span class="range-slider-value" data-range-value-low="200"></span>
                </div>
            </div>
        </div>
        <!-- End of Slider -->
    </div>
    <!-- Range slider -->
    <div class="col-12 col-md-6">
        <!-- Range slider container -->
        <div id="input-slider-range" data-range-value-min="100" data-range-value-max="500"></div>
        <!-- Range slider values -->
        <div class="row d-none">
            <div class="col-6">
                <span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low"></span>
            </div>
            <div class="col-6 text-right">
                <span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high"></span>
            </div>
        </div>
        <!-- End of range slider values -->
    </div>
</div>

Datepicker Pro

Use the following markup to create datepickers:

<div class="row">
    <div class="col-12">
        <!-- Form -->
        <div class="form-group">
            <label class="h6" for="exampleInputDate1">Choose a date</label>
            <div class="input-group mb-4">
                <div class="input-group-prepend">
                    <span class="input-group-text"><span class="far fa-calendar-alt"></span></span>
                </div>
                <input class="form-control datepicker" id="exampleInputDate1" placeholder="Select date" type="text" aria-label="Date with icon left">
            </div>
        </div>
        <!-- End of Form -->
    </div>
    <div class="col-12">
        <!-- Form -->
        <div class="input-daterange datepicker row align-items-center">
            <div class="col">
                <label class="h6" for="exampleInputDate2">From</label>
                <div class="form-group">
                    <div class="input-group input-group-border">
                        <div class="input-group-prepend"><span class="input-group-text"><span class="far fa-calendar-alt"></span></span></div>
                        <input class="form-control datepicker" id="exampleInputDate2" placeholder="Start date" type="text">
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="form-group">
                    <label class="h6" for="exampleInputDate3">To</label>
                    <div class="input-group input-group-border">
                        <div class="input-group-prepend"><span class="input-group-text"><span class="far fa-calendar-alt"></span></span></div>
                        <input class="form-control datepicker" id="exampleInputDate3" placeholder="End date" type="text">
                    </div>
                </div>
            </div>
        </div>
        <!-- End of Form -->
    </div>
</div>