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

Bootstrap 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 HTML structure with Propeller customized classes based on material design standards.

Add .pmd-textfield to the parent div of input to customize Bootstrap input into Propeller input. Additionally, use .pmd-textfield-floating-label to make input label float upwards.

Help text

Basic elements

Help text

Basic elements with floating labels

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

Control sizes

Control sizing with floating labels

Use Input states by adding the disabled boolean attribute on an input to prevent user input and trigger a slightly different look.

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

Input states

Bootstrap provides validation states for error, warning, and success states on form controls. Add .has-warning to the parent div of the input in order to create a warning input field. Similarly, add .has-success and .has-error to create success and error input fields respectively. Using Bootstrap HTML structure and Propeller customized classes, you can create such inputs with varying validation states.

Help text

Help text

Help text

Validation states

Validation states with floating labels

Propeller input fields with icon. Add the div with .input-group-addon containing the icon to create an input field with icon.

perm_identity
https

Input fields with icons

perm_identity
https

Input fields with floating labels

Text Area

Multi-line text fields automatically break to a new line for overflow text and scroll vertically when the cursor reaches the lower edge.

Add .pmd-textfield-floating-label class to get floating textarea.

Normal textarea

Floating Textarea

Checkboxes

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

Inline Checkboxes - Use .checkbox-inline on a series of checkboxes for controls that appear on the same line.

Radio

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

Inline Radio - Use .radio-inline on a series of radio boxes for controls that appear on the same line.

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.

Light theme

Dark theme

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-input-group-label Add this class to create inline radio Optional
.pmd-switch Add this class to create inline radio Optional
.pmd-switch-label Add this class to create inline radio Optional