Avant UI Kit

Documentation

Forms

There is a variety of elements that can be used to create forms. View the control styles, layout options, and custom components for creating a wide variety of forms.

Form controls

Bootstrap’s form controls expand normal form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.

Textual form control like <input>s, <select>s, and <textarea>s are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more. 

<!-- inputs -->
<div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="form-group">
    <label for="inputReadonly">Readonly input</label>
    <input class="form-control" type="text" id="inputReadonly" placeholder="Readonly input here..." readonly>
</div>

<!-- select -->
<div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="custom-select" id="exampleFormControlSelect1">
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
        <option>Four</option>
    </select>
</div>
<div class="form-group">
    <label for="selectDisabled">Disabled select</label>
    <select class="custom-select" id="selectDisabled" disabled>
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
        <option>Four</option>
    </select>
</div>

<!-- select with multiple choices -->
<div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select class="custom-select" id="exampleFormControlSelect2" multiple>
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
        <option>Four</option>
    </select>
</div>
<div class="form-group">
    <label for="multipleSelectDisabled">Disabled multiple select</label>
    <select class="custom-select" id="multipleSelectDisabled" multiple disabled>
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
        <option>Four</option>
    </select>
</div>

<!-- textarea -->
<div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="form-group">
    <label for="textareaDisabled">Disabled textarea</label>
    <textarea class="form-control" id="textareaDisabled" rows="3" disabled></textarea>
</div>

Checkboxes and radios

Each checkbox and radio <input> and <label> pairing is wrapped in a <div> to create our custom control. 

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

<!-- radios -->
<div class="custom-control custom-radio">
    <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" checked>
    <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
    <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
    <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>
<div class="custom-control custom-radio">
    <input type="radio" id="customRadio3" name="customRadio" class="custom-control-input" disabled>
    <label class="custom-control-label" for="customRadio3">Disabled custom radio</label>
</div>

Use these elements inline. 

<div class="custom-control custom-radio custom-control-inline">
    <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
    <label class="custom-control-label" for="customRadioInline1">Custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
    <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
    <label class="custom-control-label" for="customRadioInline2">Custom radio</label>
</div>

Switches

A switch has the markup of a custom checkbox but uses the .custom-switch class to render a toggle switch. Switches also support the disabled attribute. 

<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

Create custom <input type="range"> controls with .custom-range The track (the background) and thumb (the value) are both styled to appear the same across browsers. 

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" min="0" max="9" value="2" id="customRange1">
<label for="rangeDisabled">Disabled range</label>
<input type="range" class="custom-range" min="0" max="9" value="2" id="rangeDisabled" disabled>

File browser

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text. 

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

Sizing

Set heights using classes like .form-control-lg and .form-control-sm. 

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

For selects use .custom-select-lg and .custom-select-sm. 

<select class="custom-select custom-select-lg">
    <option>Large select</option>
</select>
<select class="custom-select">
    <option>Default select</option>
</select>
<select class="custom-select custom-select-sm">
    <option>Small select</option>
</select>

Horizontal form

Create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls. Be sure to add .col-form-label to your <label>s as well so they’re vertically centered with their associated form controls.

Radios
Checkbox
<form>
    <div class="form-group row">
        <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
    </div>
    <div class="form-group row">
        <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
    </div>
    <fieldset class="form-group">
        <div class="row">
            <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
            <div class="col-sm-10">
                <div class="custom-control custom-radio">
                    <input class="custom-control-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
                    <label class="custom-control-label" for="gridRadios1">
                    	First radio
                    </label>
                </div>
                <div class="custom-control custom-radio">
                    <input class="custom-control-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
                    <label class="custom-control-label" for="gridRadios2">
                    	Second radio
                    </label>
                </div>
                <div class="custom-control custom-radio disabled">
                    <input class="custom-control-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
                    <label class="custom-control-label" for="gridRadios3">
                    	Third disabled radio
                    </label>
                </div>
            </div>
        </div>
    </fieldset>
    <div class="form-group row">
        <div class="col-sm-2">Checkbox</div>
        <div class="col-sm-10">
            <div class="custom-control custom-checkbox">
                <input class="custom-control-input" type="checkbox" id="gridCheck1">
                <label class="custom-control-label" for="gridCheck1">
                	Example checkbox
                </label>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-10">
            <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
    </div>
</form>

Inline forms

Use the .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row

@
<form class="form-inline">
    <label class="sr-only" for="inlineFormInputName2">Name</label>
    <input type="text" class="form-control mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
    <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
    <div class="input-group mr-sm-2">
        <div class="input-group-prepend">
            <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Input group

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

Left side
@
Right side
@example.com
Both sides
$
.00
Multiple
$ 0.00
Grouped with textarea
With textarea
With select
Button + input
Dropdown + input
Action Another action Something else here Separated link
Sizes
Small
Default
Large 
<!-- left side -->
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
    </div>
    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<!-- right side -->
<div class="input-group">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
    <div class="input-group-append">
        <span class="input-group-text" id="basic-addon2">@example.com</span>
    </div>
</div>

<!-- both sides -->
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">$</span>
    </div>
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
    <div class="input-group-append">
        <span class="input-group-text">.00</span>
    </div>
</div>

<!-- Multiple -->
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">$</span>
        <span class="input-group-text">0.00</span>
    </div>
    <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
</div>

<!-- Textarea -->
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">With textarea</span>
    </div>
    <textarea class="form-control" aria-label="With textarea"></textarea>
</div>

<!-- Select -->
<div class="input-group">
    <div class="input-group-prepend">
        <label class="input-group-text" for="inputGroupSelect01">Options</label>
    </div>
    <select class="custom-select" id="inputGroupSelect01">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
</div>

<!-- Button addon -->
<div class="input-group">
    <div class="input-group-prepend">
        <button class="btn btn-primary" type="button" id="button-addon1">Button</button>
    </div>
    <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>

<!-- Dropdown addon -->
<div class="input-group">
    <div class="input-group-prepend">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div role="separator" class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </div>
    <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

<!-- Sizes -->
<div class="input-group input-group-sm">
    <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
    </div>
    <input type="text" class="form-control form-control-sm" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" placeholder="Small">
</div>
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
    </div>
    <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" placeholder="Default">
</div>
<div class="input-group input-group-lg">
    <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
    </div>
    <input type="text" class="form-control form-control-lg" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" placeholder="Large">
</div>

With icons

We can also group inputs and icons. We will use Font Awesome icons. 

<div class="input-group mb-4">
    <div class="input-group-prepend">
        <span class="input-group-text input-group-icon">
            <i class="fas fa-user"></i>
        </span>
    </div>
    <input type="text" class="form-control" aria-label="Username" placeholder="Username">
</div>

<div class="input-group">
    <input type="text" class="form-control" aria-label="Username" placeholder="Username">
    <div class="input-group-append">
        <span class="input-group-text input-group-icon">
            <i class="fas fa-user"></i>
        </span>
    </div>
</div>

View the complete forms documentation at Bootstrap website.