Forms
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Bootstrap Forms documentationForm controls
<form>
<div class="form-group">
<label class="input-label" for="exampleFormControlInput1">Text</label>
<input type="text" id="exampleFormControlInput1" class="form-control" placeholder="John Doe">
</div>
<div class="form-group">
<label class="input-label" for="exampleFormControlInput2">Password</label>
<input type="password" id="exampleFormControlInput2" class="form-control" value="********">
</div>
<div class="form-group">
<label class="input-label">Helper text</label>
<input type="password" class="form-control" value="**********">
<span class="text-muted font-size-1">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</span>
</div>
<div class="form-group">
<label class="input-label" for="exampleFormControlInput3">Email</label>
<input type="email" id="exampleFormControlInput3" class="form-control" placeholder="name@example.com">
</div>
<div class="form-group">
<label class="input-label" for="exampleFormControlSelect1">Select</label>
<select id="exampleFormControlSelect1" class="form-control">
<option>Choose an option</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label class="input-label" for="exampleFormControlSelect2">Multiple select</label>
<select id="exampleFormControlSelect2" class="form-control" size="3" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label class="input-label" for="exampleFormControlTextarea1">Textarea</label>
<textarea id="exampleFormControlTextarea1" class="form-control" placeholder="Textarea field" rows="4"></textarea>
</div>
<div class="form-group">
<label class="input-label">Range input</label>
<input type="range" class="custom-range" value="3" min="0" max="10">
</div>
</form>
Input group break
Long contents don't fit in small screens? Use .input-group-{breakpoint}-down-break classes to break horizontal alignment and keep the same style in vertical order. Reduce browser size to see it in action.
<div class="input-group input-group-md-down-break">
<!-- Custom Radio -->
<div class="form-control">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="genderTypeRadio" id="genderTypeRadio1">
<label class="custom-control-label" for="genderTypeRadio1">Male</label>
</div>
</div>
<!-- End Custom Radio -->
<!-- Custom Radio -->
<div class="form-control">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="genderTypeRadio" id="genderTypeRadio2" checked>
<label class="custom-control-label" for="genderTypeRadio2">Female</label>
</div>
</div>
<!-- End Custom Radio -->
<!-- Custom Radio -->
<div class="form-control">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="genderTypeRadio" id="genderTypeRadio3">
<label class="custom-control-label" for="genderTypeRadio3">Other</label>
</div>
</div>
<!-- End Custom Radio -->
</div>
Full vertical example:
<div class="input-group input-group-down-break">
<!-- Custom Radio -->
<div class="form-control">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="verticalExampleGenderTypeRadio" id="verticalExampleGenderTypeRadio1">
<label class="custom-control-label" for="verticalExampleGenderTypeRadio1">Male</label>
</div>
</div>
<!-- End Custom Radio -->
<!-- Custom Radio -->
<div class="form-control">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="verticalExampleGenderTypeRadio" id="verticalExampleGenderTypeRadio2" checked>
<label class="custom-control-label" for="verticalExampleGenderTypeRadio2">Female</label>
</div>
</div>
<!-- End Custom Radio -->
<!-- Custom Radio -->
<div class="form-control">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="verticalExampleGenderTypeRadio" id="verticalExampleGenderTypeRadio3">
<label class="custom-control-label" for="verticalExampleGenderTypeRadio3">Other</label>
</div>
</div>
<!-- End Custom Radio -->
</div>
Custom file attachments
We use HS File Attach library to make file attachments functional.
For file inputs, swap the .form-control for .form-control-file.
The example uses HS File Attach library.
<form>
<div class="custom-file">
<input type="file" class="js-file-attach custom-file-input" id="customFile"
data-hs-file-attach-options='{
"textTarget": "[for=\"customFile\"]"
}'>
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</form>
Customized modern button look
The example uses HS File Attach library.
<form>
<!-- File Attachment Button -->
<label class="btn btn-sm btn-primary transition-3d-hover file-attachment-btn" for="fileAttachmentBtn">
<span id="customFileExample5">Choose file to upload</span>
<input id="fileAttachmentBtn" name="file-attachment" type="file" class="js-file-attach file-attachment-btn-label"
data-hs-file-attach-options='{
"textTarget": "#customFileExample5"
}'>
</label>
<!-- End File Attachment Button -->
</form>
Update photo
The example uses HS File Attach library.
<form>
<label class="avatar avatar-xl avatar-circle mr-4" for="avatarUploader">
<img id="avatarImg" class="avatar-img" src="../assets/img/160x160/img1.jpg" alt="Image Description">
</label>
<div class="btn btn-sm btn-primary file-attachment-btn">Upload Photo
<input type="file" class="js-file-attach file-attachment-btn-label" id="avatarUploader"
data-hs-file-attach-options='{
"textTarget": "#avatarImg",
"mode": "image",
"targetAttr": "src"
"allowTypes": [".png", ".jpeg", ".jpg"]
}'>
</div>
</form>
or this one
The example uses HS File Attach library.
<form>
<!-- File Attachment Input -->
<label class="file-attachment-input" for="fileAttachmentInput">
<span id="customFileExample4">Browse your device and upload documents</span>
<small class="d-block text-muted">Maximum file size 10MB</small>
<input id="fileAttachmentInput" name="file-attachment" type="file" class="js-file-attach file-attachment-input-label"
data-hs-file-attach-options='{
"textTarget": "#customFileExample4"
}'>
</label>
<!-- End File Attachment Input -->
</form>
Disabled & Readonly Fields
Use readonly or disabled attributes for .form-control
<div class="form-group row">
<label class="col-sm-3 col-form-label">Readonly plain text</label>
<div class="col-sm-9">
<input type="text" class="form-control-plaintext" value="email@example.com" readonly>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Readonly field</label>
<div class="col-sm-9">
<input type="text" class="form-control" value="Read only" readonly>
</div>
</div>
<div class="form-group">
<label>Disabled input</label>
<input type="text" class="form-control" placeholder="Disabled input" disabled>
</div>
<div class="form-group">
<label>Disabled select</label>
<select class="custom-select" disabled>
<option>Choose an option</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label>Disabled textarea</label>
<textarea class="form-control" placeholder="Disabled textarea" disabled></textarea>
</div>
<div class="form-group">
<label>Disabled file input</label>
<div class="custom-file">
<input type="file" id="customFileExample1" class="custom-file-input" disabled>
<label class="custom-file-label" for="customFileExample1">Choose file</label>
</div>
</div>
<div class="form-group">
<label>Disabled range input</label>
<input type="range" class="custom-range" value="3" min="0" max="10" disabled>
</div>
Input group Flush
<div class="row">
<div class="col-md-6 mb-3 mb-md-0">
<div class="input-group-flush mb-2">
<input type="email" class="form-control" placeholder="Email" aria-label="Email">
</div>
<div class="input-group-flush mb-2">
<input type="password" class="form-control" placeholder="Password" aria-label="Password">
</div>
</div>
</div>
Input group Merge
<!-- Input Group -->
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="far fa-user"></i>
</span>
</div>
<input type="text" class="form-control" placeholder="Full name" aria-label="Full name">
</div>
<!-- End Input Group -->
Borderless form
Add .input-group-borderless to the parent class for an input form without borders.
<div class="row">
<div class="col-md-6 mb-3 mb-md-0">
<div class="input-group-borderless mb-2">
<input type="email" class="form-control" placeholder="Email" aria-label="Email">
</div>
<div class="input-group-borderless mb-2">
<input type="password" class="form-control" placeholder="Password" aria-label="Password">
</div>
</div>
</div>
Pilled form
Use the .input-group-pill modifier class to make forms more rounded (with a larger border-radius and additional horizontal padding).
<div class="row">
<div class="col-md-6 mb-3 mb-md-0">
<div class="input-group-pill mb-2">
<input type="email" class="form-control" placeholder="Email" aria-label="Email">
</div>
<div class="input-group-pill mb-2">
<input type="password" class="form-control" placeholder="Password" aria-label="Password">
</div>
<!-- Input Group -->
<div class="input-group input-group-pill input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="far fa-user"></i>
</span>
</div>
<input type="text" class="form-control" placeholder="Full name" aria-label="Full name">
</div>
<!-- End Input Group -->
</div>
</div>
Checkbox and radios
You will receive notifications about actions to your email.
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" id="customCheck11" class="custom-control-input">
<label class="custom-control-label" for="customCheck11">Unchecked</label>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" id="customCheck12" class="custom-control-input" checked>
<label class="custom-control-label" for="customCheck12">Checked</label>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" id="customCheck13" class="custom-control-input indeterminate-checkbox" checked>
<label class="custom-control-label" for="customCheck13">Indeterminate</label>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" id="customHelperCheck1" class="custom-control-input">
<label class="custom-control-label" for="customHelperCheck1">Notify about new notifications</label>
<div class="text-muted font-size-1">You will receive notifications about actions to your email.</div>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" id="customCheck14" class="custom-control-input" disabled>
<label class="custom-control-label" for="customCheck14">Unchecked and disabled</label>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" id="customCheck15" class="custom-control-input" checked disabled>
<label class="custom-control-label" for="customCheck15">Checked and disabled</label>
</div>
</div>
You will receive notifications about actions to your email.
<div class="form-group">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" class="custom-control-input" name="customRadio">
<label class="custom-control-label" for="customRadio1">Unchecked</label>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" class="custom-control-input" checked name="customRadio">
<label class="custom-control-label" for="customRadio2">Checked</label>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio3" class="custom-control-input" name="customRadio">
<label class="custom-control-label" for="customRadio3">Unchecked</label>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio4" class="custom-control-input" name="customRadio">
<label class="custom-control-label" for="customRadio4">Notify about new notifications</label>
<div class="text-muted font-size-1">You will receive notifications about actions to your email.</div>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio5" class="custom-control-input" disabled name="customRadio">
<label class="custom-control-label" for="customRadio5">Unchecked and disabled</label>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio6" class="custom-control-input" checked disabled>
<label class="custom-control-label" for="customRadio6">Checked and disabled</label>
</div>
</div>
Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.
<div class="form-group">
<div class="form-check form-check-inline">
<div class="custom-control custom-checkbox">
<input type="checkbox" id="customInlineCheck1" class="custom-control-input">
<label class="custom-control-label" for="customInlineCheck1">Unchecked</label>
</div>
</div>
<div class="form-check form-check-inline">
<div class="custom-control custom-checkbox">
<input type="checkbox" id="customInlineCheck2" class="custom-control-input indeterminate-checkbox" checked>
<label class="custom-control-label" for="customInlineCheck2">Indeterminate</label>
</div>
</div>
<div class="form-check form-check-inline">
<div class="custom-control custom-checkbox">
<input type="checkbox" id="customInlineCheck3" class="custom-control-input" checked>
<label class="custom-control-label" for="customInlineCheck3">Checked</label>
</div>
</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<div class="custom-control custom-radio">
<input type="radio" id="customInlineRadio1" class="custom-control-input" name="customInlineRadio">
<label class="custom-control-label" for="customInlineRadio1">Unchecked</label>
</div>
</div>
<div class="form-check form-check-inline">
<div class="custom-control custom-radio">
<input type="radio" id="customInlineRadio2" class="custom-control-input indeterminate-checkbox" checked name="customInlineRadio">
<label class="custom-control-label" for="customInlineRadio2">Checked</label>
</div>
</div>
<div class="form-check form-check-inline">
<div class="custom-control custom-radio">
<input type="radio" id="customInlineRadio3" class="custom-control-input indeterminate-checkbox" name="customInlineRadio">
<label class="custom-control-label" for="customInlineRadio3">Unchecked</label>
</div>
</div>
</div>
Checkbox bookmark New
<!-- Checkbbox Bookmark -->
<div class="custom-control custom-checkbox-bookmark mb-2">
<input type="checkbox" id="checkboxBookmark1" class="custom-control-input custom-checkbox-bookmark-input">
<label class="custom-checkbox-bookmark-label" for="checkboxBookmark1">
<span class="custom-checkbox-bookmark-default">
<i class="far fa-star"></i>
</span>
<span class="custom-checkbox-bookmark-active">
<i class="fas fa-star"></i>
</span>
<span class="text-dark ml-2">Star checkbox</span>
</label>
</div>
<!-- End Checkbbox Bookmark -->
<!-- Checkbbox Bookmark -->
<div class="custom-control custom-checkbox-bookmark">
<input type="checkbox" id="checkboxBookmark2" class="custom-control-input custom-checkbox-bookmark-input">
<label class="custom-checkbox-bookmark-label" for="checkboxBookmark2">
<span class="custom-checkbox-bookmark-default">
<i class="far fa-bookmark"></i>
</span>
<span class="custom-checkbox-bookmark-active">
<i class="fas fa-bookmark"></i>
</span>
<span class="text-dark ml-2">Bookmark checkbox</span>
</label>
</div>
<!-- End Checkbbox Bookmark -->
Switches
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex align-items-center mb-3" for="customSwitch1">
<input type="checkbox" class="toggle-switch-input" id="customSwitch1">
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Unchecked</span>
</span>
</label>
<!-- End Checkbox Switch -->
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex align-items-center mb-3" for="customSwitch2">
<input type="checkbox" class="toggle-switch-input" id="customSwitch2" checked>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Checked</span>
</span>
</label>
<!-- End Checkbox Switch -->
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex mb-3" for="customSwitch3">
<input type="checkbox" class="toggle-switch-input" id="customSwitch3">
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Notify about new notifications</span>
<small class="d-block text-muted">You will receive notifications about actions to your email</small>
</span>
</label>
<!-- End Checkbox Switch -->
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex align-items-center mb-3" for="customSwitch4">
<input type="checkbox" class="toggle-switch-input" id="customSwitch4" disabled>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Disabled</span>
</span>
</label>
<!-- End Checkbox Switch -->
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex align-items-center mb-3" for="customSwitch5">
<input type="checkbox" class="toggle-switch-input" id="customSwitch5" checked disabled>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Checked & disabled</span>
</span>
</label>
<!-- End Checkbox Switch -->
Validation states
Valid feedback
<div class="form-group">
<label>Valid input</label>
<input type="text" class="form-control is-valid" placeholder="Placeholder">
</div>
<div class="form-group">
<label>Valid select</label>
<select class="form-control custom-select is-valid">
<option>Choose an option</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<span class="text-success font-size-1">Valid feedback</span>
</div>
<div class="form-group">
<label>Valid textarea</label>
<textarea class="form-control is-valid" placeholder="Textarea field" rows="4"></textarea>
</div>
<div class="form-group">
<label>Valid file input</label>
<div class="custom-file">
<input type="file" id="customFileExample2" class="custom-file-input is-valid">
<label class="form-control custom-file-label" for="customFileExample2">Choose file</label>
</div>
</div>
Invalid feedback
<div class="form-group">
<label>Valid input</label>
<input type="text" class="form-control is-invalid" placeholder="Placeholder">
</div>
<div class="form-group">
<label>Valid select</label>
<select class="form-control custom-select is-invalid">
<option>Choose an option</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<span class="text-success font-size-1">Valid feedback</span>
</div>
<div class="form-group">
<label>Valid textarea</label>
<textarea class="form-control is-invalid" placeholder="Textarea field" rows="4"></textarea>
</div>
<div class="form-group">
<label>Valid file input</label>
<div class="custom-file">
<input type="file" id="customFileExample3" class="custom-file-input is-invalid">
<label class="form-control custom-file-label" for="customFileExample3">Choose file</label>
</div>
</div>