Form

An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. Users generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.)

Bootstrap 4 Form fields

Bootstrap 4 has some global styling defined for each of the individual form controls. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

Basic bootstrap elements


							

Propeller Form Fields

Propeller Form Fields consists of Bootstrap 4 HTML structure with Propeller customized classes based on material design standards.

Add .pmd-textfield to the parent div to customize Bootstrap 4 input into Propeller input which contains an input line which is focused when the user selects it.

Help Text.

                            

Propeller Form Field with Floating Label

Use .pmd-textfield-floating-label to make input label float upwards.

Help Text.

                            

Control Sizes

Bootstrap 4 provides inputs in various sizes: small, medium and large. Using Bootstrap 4 HTML structure and Propeller customized classes, you can create such inputs with varying sizes.


                            

                            

Readonly State

Add the readonly boolean attribute on an input to prevent user input and style the input as disabled.


							

Readonly with Plain Text

Add .form-control-plaintext to the input to display its value as plain text.


							

Disabled State

Create disbaled input by adding the disabled boolean attribute on an input to prevent user input and trigger a slightly different look.


							

Propeller File Input

Add .pmd-custom-file followed by .custom-file to customize the Bootstrap 4 Custom File Input into Propeller File Input.


                            

Custom Select

Wrap custom select with a div having classes .form-group and .pmd-textfield to create Propeller customized Custom Select.


							

Inverse Form Fields

Use .bg-dark and .text-white to the card structure to create an inverse form.

Help Text.

                            

jQuery Plugin

Call the jQuery plugin to initialize the textfield and textarea while fetching the data dynamically.


                        

Checkboxes

Add .pmd-checkbox besides .custom-checkbox to create propeller customized checkbox. You can also add .pmd-checkbox-ripple-effect to the label to provide a ripple effect to the checkbox.


                            

Inline Checkboxes - Use .custom-control-inline besides .custom-control to create checkboxes that appear on the same line.


							

Inverse Checkboxes

Use .bg-dark and .text-white to the card structure to create an inverse checkbox.


                            

jQuery Plugin

Call the jQuery plugin to initialize the checkbox while fetching the data dynamically.


                        

Radio

Add .pmd-radio besides .custom-radio to create a propeller customized radio. You can also add .pmd-radio-ripple-effect to the label provide a ripple effect to the radio.


                            

Inline Radio - Use .custom-control-inline besides .custom-control to create radio buttons that appear on the same line.


							

Inverse Radio

Use .bg-dark and .text-white to the card structure to create an inverse radio.


                            

jQuery Plugin

Call the jQuery plugin to initialize the radio while fetching the data dynamically.


						

Checkbox and Radio without Labels

Use .position-static besides .custom-control-label to create checkboxes and radio buttons without labels.


							

Range Inputs

Set horizontally scrollable range inputs using .custom-range.


							

You can set range limits using min and max attributes.


							

To make the range bar jump by a specific amount, use step attribute.


							

Inverse Range Inputs

Use .bg-dark and .text-white to the card structure to create an inverse range input.


							

Form Grid

Add col-*-* class besides the .form-group to create forms layouts that require multiple columns, varied widths and other alignment options.


							

Form Row

Use .form-row to create more tighter and compact layouts.


							

							

Horizontal Form

Radios
Checkbox

							

Auto-sizing Form

Use .col-auto to make the content vertically center.


							

Inline Form

Use .form-inline to display the form horizontally.


							

Input Validation State on Server Side

Propeller provides validation states for error, and success states on form controls.

Add .is-valid to the input field and .valid-feedback to the div containing the validation message in order to create a success input field. Similarly, add .is-invalid and .invalid-feedback to create error input field.

Looks good!
Looks good!
@
Please provide a valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
Example invalid custom file feedback
Example invalid feedback text

                            

Input Validation State on Client Side

For custom form validation messages, add the novalidate boolean attribute to your <form>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript.

Looks good!
Looks good!
@
Please provide a valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
Example invalid custom file feedback
Example invalid feedback text

                            

Inverse Form Validation

Use .bg-dark and .text-white to the card structure to create an inverse form.

Looks good!
Looks good!
@
Please provide a valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
Example invalid custom file feedback
Example invalid feedback text

                            

Validation with Tooltips

Replace .valid-feedback and invalid-feedback by .valid-tooltip and .invalid-tooltip to display the validation messages in the form of tooltips.

Looks good!
Looks good!
@
Please provide a valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.

                            

Toggle Switch

Toggle Switch is - To switch from one setting to another. It implies that there are only two possible settings and that you are switching from the current setting to the other setting. For example, light switches that turn a light on or off are toggle switches.

Add .pmd-switch to the parent div and .pmd-switch-label to the tag containing label.


                            

Inverse Toggle Switch

Use .bg-dark and .text-white to the card structure to create an inverse toggle switch.


                            

Configuration Options

The Propeller CSS classes apply various predefined visual enhancements to the form elements. The table lists the available classes and their effects.

Propeller Class Effect Remark
.pmd-textfield Class added for general label and input formatting. Required
.pmd-textfield-floating-label Adds floating animation to the label of input Optional
.pmd-checkbox To create propeller customized checkbox Optional
.pmd-checkbox-ripple-effect Add this class to create ripple effect to checkboxes Optional
.pmd-radio To create propeller customized radiobutton Optional
.pmd-radio-ripple-effect Add this class to create ripple effect to radio Optional
.pmd-custom-file Add this class to create propeller customized file input Optional
.pmd-switch To create propeller customized toggle switch Optional
.pmd-switch-label Add this class to the label of the toggle switch Optional