Purpose Website UI Kit - Professional Website UI Kit by Webpixels

Form elements

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Open Bootstrap Docs

Default

<div class="form-group">
    <input type="text" class="form-control" placeholder="Default input">
</div>

Emphasized

<div class="form-group">
    <input type="text" class="form-control form-control-emphasized" placeholder="Emphasized input">
</div>

Muted

<div class="form-group">
    <input type="text" class="form-control form-control-muted" placeholder="Muted input">
</div>

Borderless

<div class="form-group">
    <input type="text" class="form-control border-0" placeholder="No borders">
</div>

Input states

<div class="form-group">
    <input type="text" class="form-control is-valid" placeholder="Is valid">
</div>
<div class="form-group">
    <input type="text" class="form-control is-invalid" placeholder="Is invalid">
</div>
<div class="form-group">
    <input type="text" class="form-control" placeholder="Disabled" disabled>
</div>

Sizing

<div class="form-group">
    <input type="text" class="form-control form-control-xl" placeholder="Extra large input">
</div>
<div class="form-group">
    <input type="text" class="form-control form-control-lg" placeholder="Large input">
</div>
<div class="form-group">
    <input type="text" class="form-control" placeholder="Normal input">
</div>
<div class="form-group">
    <input type="text" class="form-control form-control-sm" placeholder="Small input">
</div>

Input groups

<div class="form-group">
    <div class="input-group input-group-transparent mb-4">
        <div class="input-group-prepend">
            <span class="input-group-text"><i class="fas fa-search"></i></span>
        </div>
        <input type="text" class="form-control" placeholder="Search">
    </div>
</div>
<div class="form-group">
    <div class="input-group input-group-transparent mb-4">
        <input type="text" class="form-control" placeholder="Birthday">
        <div class="input-group-append">
            <span class="input-group-text"><i class="fas fa-calendar"></i></span>
        </div>
    </div>
</div>

@example.com

<div class="form-group">
    <div class="input-group mb-4">
        <div class="input-group-prepend">
            <span class="input-group-text"><i class="fas fa-search"></i></span>
        </div>
        <input type="text" class="form-control" placeholder="Search keyword ..." aria-label="Search keyword" aria-describedby="basic-addon1">
    </div>
</div>
<div class="form-group">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Enter your email" aria-label="Enter your email" aria-describedby="basic-addon2">
        <div class="input-group-append">
            <span class="input-group-text" id="basic-addon2">@example.com</span>
        </div>
    </div>
</div>

Input with selectpicker

<div class="form-group">
    <div class="input-group">
        <div class="input-group-prepend">
            <select class="selectpicker">
                <option>http://</option>
                <option>https://</option>
            </select>
        </div>
        <input type="text" class="form-control">
    </div>
</div>
<div class="form-group">
    <div class="input-group">
        <input type="text" class="form-control">
        <div class="input-group-append">
            <select class="selectpicker">
                <option>.com</option>
                <option>.net</option>
                <option>.ro</option>
            </select>
        </div>
    </div>
</div>

Input with button

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <button class="btn btn-primary" type="button">Button</button>
    </div>
    <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
    <div class="input-group-append">
        <button class="btn btn-primary" type="button">Button</button>
    </div>
</div>

Input mask

<div class="form-group">
    <div class="input-group input-group-transparent">
        <input type="text" class="form-control input-mask" data-mask="0000 0000" placeholder="0000 0000 0000 0000">
        <div class="input-group-append">
            <span class="input-group-text"><i class="fas fa-credit-card"></i></span>
        </div>
    </div>
</div>

Selectpicker

<div class="row mb-4">
    <div class="col-md-6">
        <select class="selectpicker" title="Simple select" data-live-search="true" data-live-search-placeholder="Search ...">
            <option>Alerts</option>
            <option>Badges</option>
            <option>Buttons</option>
            <option>Cards</option>
            <option>Forms</option>
            <option>Modals</option>
        </select>
    </div>
    <div class="col-md-6">
        <select class="selectpicker" title="Option groups" data-live-search="true" data-live-search-placeholder="Search ..." multiple>
            <optgroup label="Components">
                <option>Alerts</option>
                <option>Badges</option>
                <option>Buttons</option>
                <option>Cards</option>
            </optgroup>
            <optgroup label="Utilities">
                <option>Borders</option>
                <option>Colors</option>
                <option>Typography</option>
            </optgroup>
        </select>
    </div>
</div>

Tagsinput

<input type="text" class="form-control" value="Bucharest, Cluj, Iasi, Timisoara, Piatra Neamt" data-role="tagsinput" />

Textarea

                                Fixed textarea
                                
                                Resizable textarea
                                
                                Autosize textarea

<div class="form-group">
    <label>Fixed textarea</label>
    <textarea class="form-control" placeholder="This is a fixed height textarea" rows="3" resize="none"></textarea>
</div>
<div class="form-group">
    <label>Resizable textarea</label>
    <textarea class="form-control" placeholder="You can manually resize this textarea" rows="3"></textarea>
</div>
<div class="form-group">
    <label>Autosize textarea</label>
    <textarea class="form-control textarea-autosize" placeholder="This textarea will autosize while you type" rows="1"></textarea>
</div>

Checkboxes

Unchecked

Checked

Disabled unchecked

Disabled checked

<div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">Unchecked</label>
</div>
<div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customCheck2" checked="">
    <label class="custom-control-label" for="customCheck2">Checked</label>
</div>
<div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customCheck3" disabled="">
    <label class="custom-control-label" for="customCheck3">Disabled unchecked</label>
</div>
<div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customCheck4" checked="" disabled="">
    <label class="custom-control-label" for="customCheck4">Disabled checked</label>
</div>

Checkbox button

Active Checkbox Checkbox

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="checkbox" name="options" id="checkboxButton1" autocomplete="off" checked> Checkbox button
    </label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="checkbox" name="options" id="checkboxButton2" autocomplete="off" checked> Active
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="checkboxButton3" autocomplete="off"> Checkbox
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="checkboxButton4" autocomplete="off"> Checkbox
    </label>
</div>

Radio buttons

Unchecked

Checked

Disabled unchecked

Disabled checkbox

<div class="custom-control custom-radio mb-3">
    <input type="radio" name="custom-radio-1" class="custom-control-input" id="customRadio1">
    <label class="custom-control-label" for="customRadio1">Unchecked</label>
</div>
<div class="custom-control custom-radio mb-3">
    <input type="radio" name="custom-radio-1"  class="custom-control-input" id="customRadio2" checked="">
    <label class="custom-control-label" for="customRadio2">Checked</label>
</div>
<div class="custom-control custom-radio mb-3">
    <input type="radio" name="custom-radio-1"  class="custom-control-input" id="customRadio3" disabled="">
    <label class="custom-control-label" for="customRadio3">Disabled unchecked</label>
</div>
<div class="custom-control custom-radio mb-3">
    <input type="radio" name="custom-radio-1"  class="custom-control-input" id="customRadio4" checked="" disabled="">
    <label class="custom-control-label" for="customRadio4">Disabled checkbox</label>
</div>

Radio button

Active Radio Radio

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="radio" name="custom-radio-3" id="radioButton1" autocomplete="off"> Radio button
    </label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="radio" name="custom-radio-2"  id="radioButton2" autocomplete="off" checked> Active
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="custom-radio-2"  id="radioButton3" autocomplete="off"> Radio
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="custom-radio-2"  id="radioButton4" autocomplete="off"> Radio
    </label>
</div>

Toggle switch

Untoggled switch

Toggled switch

Disabled switch

Untoggled switch

Toggled switch

Disabled switch

<div class="row mb-4">
    <div class="col-md-4">
        <label class="d-block">Untoggled switch</label>
        <label class="toggle-switch">
            <input type="checkbox">
            <span class="toggle-switch-slider"></span>
        </label>
    </div>
    <div class="col-md-4">
        <label class="d-block">Toggled switch</label>
        <label class="toggle-switch">
            <input type="checkbox" checked>
            <span class="toggle-switch-slider"></span>
        </label>
    </div>
    <div class="col-md-4">
        <label class="d-block">Disabled switch</label>
        <label class="toggle-switch">
            <input type="checkbox" disabled>
            <span class="toggle-switch-slider"></span>
        </label>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <label class="d-block">Untoggled switch</label>
        <label class="toggle-switch">
            <input type="checkbox">
            <span class="toggle-switch-slider rounded-circle"></span>
        </label>
    </div>
    <div class="col-md-4">
        <label class="d-block">Toggled switch</label>
        <label class="toggle-switch">
            <input type="checkbox" checked>
            <span class="toggle-switch-slider rounded-circle"></span>
        </label>
    </div>
    <div class="col-md-4">
        <label class="d-block">Disabled switch</label>
        <label class="toggle-switch">
            <input type="checkbox" disabled>
            <span class="toggle-switch-slider rounded-circle"></span>
        </label>
    </div>
</div>

Range slider

<div class="row"> 
    <div class="col-lg-6">
        <!-- Default input slider -->
        <div class="input-slider-container">
            <div id="input-slider" class="input-slider" data-range-value-min="100" data-range-value-max="500"></div>
            <!-- Input slider values -->
            <div class="row mt-3">
                <div class="col-6">
                    <span id="input-slider-value" class="range-slider-value" data-range-value-low="100"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="range-slider-wrapper ">
            <!-- 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">
                <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>
        </div>
    </div>
</div>
<div class="row mt-5"> 
    <div class="col-lg-6">
        <div class="input-slider-container mb-5">
            <div id="input-slider-red" class="input-slider input-slider--red" data-range-value-min="100" data-range-value-max="900"></div>
            <!-- Input slider values -->
            <div class="row mt-3">
                <div class="col-6">
                    <span id="input-slider-red-value" class="range-slider-value" data-range-value-low="200"></span>
                </div>
            </div>
        </div>
        <!-- Yellow input slider -->
        <div class="input-slider-container mb-5">
            <div id="input-slider-yellow" class="input-slider input-slider--yellow" data-range-value-min="100" data-range-value-max="900"></div>
            <!-- Input slider values -->
            <div class="row mt-3">
                <div class="col-6">
                    <span id="input-slider-yellow-value" class="range-slider-value" data-range-value-low="200"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <!-- Cyan input slider -->
        <div class="input-slider-container mb-5">
            <div id="input-slider-cyan" class="input-slider input-slider--cyan" data-range-value-min="100" data-range-value-max="900"></div>
            <!-- Input slider values -->
            <div class="row mt-3">
                <div class="col-6">
                    <span id="input-slider-cyan-value" class="range-slider-value" data-range-value-low="200"></span>
                </div>
            </div>
        </div>
        <!-- Pink input slider -->
        <div class="input-slider-container mb-5">
            <div id="input-slider-pink" class="input-slider input-slider--pink" data-range-value-min="100" data-range-value-max="900"></div>
            <!-- Input slider values -->
            <div class="row mt-3">
                <div class="col-6">
                    <span id="input-slider-pink-value" class="range-slider-value" data-range-value-low="200"></span>
                </div>
            </div>
        </div>
    </div>
</div>

File browser

Choose a file…

<div>
    <input type="file" name="file-1[]" id="file-1" class="custom-input-file" data-multiple-caption="{count} files selected" multiple />
    <label for="file-1">
        <i class="fa fa-upload"></i>
        <span>Choose a file…</span>
    </label>
</div>
<div>
     <input type="file" name="file-2[]" id="file-2" class="custom-input-file custom-input-file--2" data-multiple-caption="{count} files selected" multiple />
    <label for="file-2">
        <i class="fa fa-upload"></i>
        <span>Choose a file…</span>
    </label>
</div>