Input

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

Use different types of class with .form-control class which contains input field.

Find input style options below:

Input style options Class Description
Rounded Input .round Use this class for round styled input.
Square Input .square Use this class for square styled input.
Horizontal Input .col-form-label To make label vertically centered of form-control, use .col-form-label class with <label> tag.
Custom File Input .custom-file .custom-file-input For Custom File Input, use .custom-file-input class within .custom-file class.
Input with Icons .has-icon-{left | right} To put left | right aligned icons inside your input, use this class with form-group. Also add .form-control-position as a sibling of <input> tag.
Input Sizing .form-control.form-control-[sm | lg] Use these classes for different input sizing.
Input Validation states .{is-valid | is-invalid} For indicating valid | invalid form fields, use this class with .form-control. Use .{valid | invalid}-feedback as a sibling of <input> tag for validation feedback.
Input Validation with Tooltips .{valid | invalid}-tooltip Use .needs-validation class with <form> tag, .{valid | invalid}-tooltip classes to display validation feedback in a styled tooltip.

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Plugin Link https://getbootstrap.com/docs/4.4/components/forms/
Template Page path-to-apex-page/form-inputs.html

Input Group

Form Input Group options with different classes and advance options.

Inout Group Options Class Description
Simple Input Group .input-group Use this class for input-group. Inside .input-group class, add .input-group-{prepend | append} class and it's sibling would be input tag.
Different Sizes .input-group-{sm | lg} Add this class to .input-group for small/large append/prepend.
With Buttons - Add a <button> tag inside .input-group-{prepend | append} class.
With Dropdown .dropdown-toggle Add <button> with .dropdown-toggle class and add dropdown-menu after it to get input group with dropdown.

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Plugin Link https://getbootstrap.com/docs/4.4/components/input-group/
Template Page path-to-apex-page/form-input-groups.html

Checkbox

Form checkbox options with different classes and advance options.

Some checkbox options below that can be used:

Checkbox Options Class Description
Default Checkboxes .checkbox Add .checkbox as a single wrapper and inside this wrapper, add <label> with for attribute & <input> tag to get better output. id attribute of this input and for attribute of the label must be same.
Checkbox with Colors .checkbox.checkbox-{colorName} Use this class to change the color of the checkboxes.
Custom Checkbox .custom-control.custom-checkbox Add this class as a single wrapper and inside this wrapper, add .custom-control-label as a sibling of input.custom-control-input for better output. id attribute of this input and for attribute of the label must be same.
Checkbox Size .checkbox.checkbox-sm Use this class for small checkbox.

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Plugin Link https://getbootstrap.com/docs/4.4/components/input-group/#checkboxes-and-radios
Template Page path-to-apex-page/form-checkbox.html

Radio

Radio makes itself different from checkbox by having name attribute (of the same categorized radio inputs) same.

Form radio options with different classes and advance options.

Some radio options below that can be used:

Radio Options Class Description
Default Radio Buttons .radio Add .radio as a single wrapper and inside this wrapper, add <label> with for attribute & <input> tag to get better output. id attribute of this input and for attribute of the label must be same.
Colored Radio Buttons .radio.radio-{colorName} Use this class to change the color of the radio buttons.
Custom Radio Buttons .custom-control.custom-radio Add this class as a single wrapper and inside this wrapper, add .custom-control-label as a sibling of input.custom-control-input for better output. id attribute of this input and for attribute of the label must be same.
Radio Size .radio.radio-sm Use this class for small radio buttons.

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Plugin Link https://getbootstrap.com/docs/4.4/components/input-group/#checkboxes-and-radios
Template Page path-to-apex-page/form-radio.html

Switch

Some options that can be possible with Switch below:

Switch options Class Description
Basic Custom Swtich .custom-switch Add this class as a single wrapper and inside this wrapper, add .custom-control-label as a sibling of input.custom-control-input for better output. id attribute of this input and for attribute of the label must be same.
Colors .custom-switch.custom-switch-{colorName} Use this class for colored switches.

Switchery

Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps. You can easily customize switches, so that they match your design perfectly.

1. Required Vendor files
<link rel="stylesheet" href="switchery.min.css">
<script src="switchery.min.js"></script>
2. HTML structure
<div class="form-group">
    <input type="checkbox" id="switchery-default" class="switchery" checked>
    <label for="switchery-default">Switchery</label>
</div>
3. Initialization
var switchery = new Switchery('.switchery', { color: '#37BC9B' });

Some options that can be possible with Switchery below:

Switchery Options Class Description
Basic Switchery .switchery Use this class to input[type="checkbox"] to add switchery. id attribute of this input and for attribute of the label must be same.
Colors .switchery.switchery-{colorName} Use this class for colored switchery.
Sizes data-size="[xs | sm | lg]" Use this with input[type="checkbox"] for different sizes.

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Bootstrap Link https://getbootstrap.com/docs/4.4/components/forms/#switches
Switchery Link https://github.com/abpetkov/switchery
Template Page path-to-apex-page/form-switch.html

Input Tag

taggingJS is a jQuery plugin to create an high customizable front-end tag system.

1. Required Vendor files
<link rel="stylesheet" href="tagging.css">
<script src="tagging.min.js"></script>
2. Binding to existing DOM element
<div data-tags-input-name="tag" class="tagBox">input-tag, taggingJS</div>
3. Basic usage may look something like this
$(".tagBox").tagging();

Refer more configuration options from here.

Refer following links for detailed documentation, methods and examples:

Type URL
Plugin Link https://github.com/sniperwolf/taggingJS
Template Page path-to-apex-page/form-input-tags.html

Quill Editor

Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.

Note: To change fonts of quill editor, you'll have to import your required font family in css and change editor fonts.

1. Required Vendor files:
<link rel="stylesheet" href="quill.snow.css">
<script href="quill.js"><script>
2. Create the editor container:
<div id="editor"></div>
3. Basic usage looks something like this.
var quill = new Quill('#editor', {
    theme: 'snow'
});
Type URL
Plugin Link https://quilljs.com/
Template Page path-to-apex-page/form-editor.html

Date & Time Picker

The basic setup requires targetting an input element and invoking the picker.

Required Vendor files:
<link rel="stylesheet" href="pickadate.css">
<script src="picker.js"></script>
<script src="picker.date.js"></script>
<script src="picker.time.js"></script>
<script src="legacy.js"></script>

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Plugin Link https://github.com/amsul/pickadate.js/
Template Page path-to-apex-page/form-date-time-picker.html

Select2

Select2 supports a wide variety of options that allow you to customize it to your needs.

1. Required Vendor files:
<link rel="stylesheet" type="text/css" href="select2.min.css">
<script src="select2.full.min.js"></script>
2. Call the select2-function after the page has loaded
$(".select2").select2();

You have to add plugin js and css. Some options that can be possible with select2 below:

Select2 options Class Description
Basic select2 .select2 For basic select2, use this class. You can use this class for multiple select2 also. Use multiple attribute for multiple select box.
Select2 with icon data-icon Use data attribute data-icon to add icon name for each options. And use select.select2-icons to set icon with option.
Sizes .select2-size-[sm | lg] Use this class for small | large size of select2.

Refer more configuration options from here.

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Plugin Link https://select2.github.io/
Template Page path-to-apex-page/form-select.html