:: BigBucket

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

Example

<div class="form-group">
        <input type="text" class="form-control" placeholder="Default">
        </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="fa 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="fa 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="fa 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>

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>