Forms

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

Inputs

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>

Flushed

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

Masks

Heads up! In order to use the input masks you will need to include additional scripts in the page. See the Input Mask plugin.

<form>
    <div class="form-group">
        <label class="form-control-label">Date</label>
        <input type="text" class="form-control input-mask" data-mask="00/00/0000" placeholder="MM/DD/YYY">
    </div>
    <div class="form-group">
        <label class="form-control-label">Time</label>
        <input type="text" class="form-control input-mask" data-mask="00:00:00" placeholder="hh:mm:ss">
    </div>
    <div class="form-group">
        <label class="form-control-label">Datetime</label>
        <input type="text" class="form-control input-mask" data-mask="00/00/0000 00:00:00" placeholder="MM/DD/YYY hh:mm:ss">
    </div>
    <div class="form-group">
        <label class="form-control-label">Phone number</label>
        <input type="text" class="form-control input-mask" data-mask="0000 000 000" placeholder="0720 444 555">
    </div>
    <div class="form-group">
        <label class="form-control-label">Phone number with prefix</label>
        <input type="text" class="form-control input-mask" data-mask="(00) 0000 0000" placeholder="(99) 5555 6666">
    </div>
    <div class="form-group">
        <label class="form-control-label">US phone number</label>
        <input type="text" class="form-control input-mask" data-mask="(000) 000-0000" placeholder="(99) 5555 6666">
    </div>
    <div class="form-group">
        <label class="form-control-label">Card number</label>
        <input type="text" class="form-control input-mask" data-mask="0000 0000 0000 0000" placeholder="1234 5678 9012 3456">
    </div>
    <div class="form-group">
        <label class="form-control-label">IP address</label>
        <input type="text" class="form-control input-mask" data-mask="000.000.000.0000" placeholder="192.168.567.890">
    </div>
</form>

Options

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>

Textarea

Default

<textarea class="form-control" placeholder="You can manually resize this textarea" rows="3"></textarea>

Non resizable

<textarea class="form-control" placeholder="This is a fixed height textarea" rows="3" resize="none"></textarea>

Autosize

Heads up! Autosize functionality is making use of the Autosize plugin.

<textarea class="form-control" data-toggle="autosize" placeholder="This textarea will autosize while you type" rows="1"></textarea>

Custom forms

Checkboxes

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck2" data-toggle="indeterminate">
    <label class="custom-control-label" for="customCheck2">Check this custom checkbox</label>
</div>
<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>

Radios

<div class="custom-control custom-radio">
    <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
    <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 custom-control-inline">
    <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
    <label class="custom-control-label" for="customRadioInline1">Toggle this 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">Or toggle this other custom radio</label>
</div>
<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>

Switches

<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>

Select menu

<select class="custom-select">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

File browser

<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 data-feather="upload"></i>
        <span>Choose a file…</span>
    </label>
</div>
<div class="mt-4">
     <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 data-feather="upload"></i>
        <span>Choose a file…</span>
    </label>
</div>

Examples

Login

Show password
<form>
    <div class="form-group">
        <label class="form-control-label">Email address</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i data-feather="user"></i></span>
            </div>
            <input type="email" class="form-control" id="input-email" placeholder="name@example.com">
        </div>
    </div>
    <div class="form-group mb-0">
        <div class="d-flex align-items-center justify-content-between">
            <div>
                <label class="form-control-label">Password</label>
            </div>
            <div class="mb-2">
                <a href="#" class="small text-muted text-underline--dashed border-primary" data-toggle="password-text" data-target="#input-password">Show password</a>
            </div>
        </div>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i data-feather="key"></i></span>
            </div>
            <input type="password" class="form-control" id="input-password" placeholder="Password">
        </div>
    </div>
    
    <div class="mt-4"><button type="button" class="btn btn-sm btn-primary btn-icon rounded-pill">
            <span class="btn-inner--text">Sign in</span>
            <span class="btn-inner--icon"><i data-feather="arrow-right"></i></span>
        </button></div>
</form>

Register

Show password
<form>
	<div class="form-group">
        <label class="form-control-label">Name</label>
        <div class="input-group input-group-merge">
            <input type="text" class="form-control form-control-prepend" id="input-name" placeholder="John Ive">
			<div class="input-group-prepend">
                <span class="input-group-text"><i data-feather="user"></i></span>
            </div>
        </div>
    </div>
	<div class="form-group">
		<label class="form-control-label">Email address</label>
        <div class="input-group input-group-merge">
            <input type="email" class="form-control form-control-prepend" id="input-email" placeholder="name@example.com">
			<div class="input-group-prepend">
                <span class="input-group-text"><i data-feather="at-sign"></i></span>
            </div>
        </div>
    </div>
    <div class="form-group mb-4">
		<div class="d-flex align-items-center justify-content-between">
            <div>
                <label class="form-control-label">Password</label>
            </div>
            <div class="mb-2">
                <a href="#" class="small text-muted text-underline--dashed border-primary" data-toggle="password-text" data-target="#input-password">Show password</a>
            </div>
        </div>
        <div class="input-group input-group-merge">
            <input type="password" class="form-control form-control-prepend" id="input-password" placeholder="********">
			<div class="input-group-prepend">
                <span class="input-group-text"><i data-feather="key"></i></span>
            </div>
        </div>
    </div>
    <div class="my-4">
        <div class="custom-control custom-checkbox mb-3">
            <input type="checkbox" class="custom-control-input" id="check-terms">
            <label class="custom-control-label" for="check-terms">I agree to the <a href="../../pages/utility/terms.html">terms and conditions</a></label>
        </div>
    </div>
    <div class="mt-4"><button type="button" class="btn btn-sm btn-primary btn-icon rounded-pill">
            <span class="btn-inner--text">Create my account</span>
            <span class="btn-inner--icon"><i data-feather="arrow-right"></i></span>
        </button></div>
</form>

Reset password

<form>
    <div class="form-group">
        <label class="form-control-label">Email address</label>
        <div class="input-group input-group-merge">
            <input type="email" class="form-control form-control-prepend" id="input-email" placeholder="name@example.com">
            <div class="input-group-prepend">
                <span class="input-group-text"><i data-feather="at-sign"></i></span>
            </div>
        </div>
    </div>
    <div class="mt-4"><button type="button" class="btn btn-sm btn-primary btn-icon rounded-pill">
            <span class="btn-inner--text">Reset password</span>
            <span class="btn-inner--icon"><i data-feather="arrow-right"></i></span>
        </button></div>
</form>

Profile

This is the main email address that we'll send notifications.
<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label class="form-control-label">First name</label>
            <input class="form-control" type="text" placeholder="Enter your first name">
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label class="form-control-label">Last name</label>
            <input class="form-control" type="text" placeholder="Also your last name">
        </div>
    </div>
</div>
<div class="row align-items-center">
    <div class="col-md-6">
        <div class="form-group">
            <label class="form-control-label">Birthday</label>
            <input type="text" class="form-control" data-toggle="date" placeholder="Select your birth date">
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label class="form-control-label">Gender</label>
            <select class="custom-select">
                <option disabled selected>Select option</option>
                <option value="1">Female</option>
                <option value="2">Male</option>
                <option value="2">Rather not say</option>
            </select>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label class="form-control-label">Email</label>
            <input class="form-control" type="email" placeholder="name@exmaple.com">
            <small class="form-text text-muted mt-2">This is the main email address that we'll send notifications.</small>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label class="form-control-label">Phone</label>
            <input class="form-control" type="text" placeholder="+40-777 245 549">
        </div>
    </div>
</div>

Address

<div class="row">
    <div class="col-sm-9">
        <div class="form-group">
            <label class="form-control-label">Address</label>
            <input class="form-control" type="text" placeholder="Enter your home address">
        </div>
    </div>
    <div class="col-sm-3">
        <div class="form-group">
            <label class="form-control-label">Number</label>
            <input class="form-control" type="tel" placeholder="No.">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-4">
        <div class="form-group">
            <label class="form-control-label">City</label>
            <input class="form-control" type="text" placeholder="City">
        </div>
    </div>
    <div class="col-sm-4">
        <div class="form-group">
            <label class="form-control-label">Country</label>
            <select class="form-control" data-toggle="select" title="Country" data-live-search="true" data-live-search-placeholder="Country">
                <option>Romania</option>
                <option>United Stated</option>
                <option>France</option>
                <option>Greece</option>
                <option>Italy</option>
                <option>Norway</option>
            </select>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="form-group">
            <label class="form-control-label">ZIP</label>
            <input class="form-control" type="tel" placeholder="ZIP">
        </div>
    </div>
</div>

Add card

<form role="form">
    <div class="row mt-3">
    <div class="col-md-12">
        <div class="form-group">
            <label class="form-control-label">Card number</label>
            <div class="input-group input-group-merge">
                <input type="text" class="form-control" data-mask="0000 0000 0000 0000" placeholder="Card number">
                <div class="input-group-append">
                    <span class="input-group-text"><i data-feather="credit-card"></i></span>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-6">
        <div class="form-group">
            <label class="form-control-label">Expiry date</label>
            <input type="text" class="form-control" data-mask="00/00" placeholder="MM/YY">
        </div>
    </div>
    <div class="col-6">
        <div class="form-group">
            <label class="form-control-label">CVV code</label>
            <div class="input-group input-group-merge">
                <input type="text" class="form-control" data-mask="000" placeholder="CVV">
                <div class="input-group-append">
                    <button type="button" data-container="body" data-toggle="popover" data-content="Check out the back of your card" class="input-group-text">
                        <i data-feather="help-circle"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <label class="form-control-label">Name on card</label>
            <input type="text" class="form-control" placeholder="Your name">
        </div>
    </div>
</div>
<div class="text-right">
    <button type="button" class="btn btn-sm btn-primary">Save card</button>
</div>

</form>
Summary