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

Regular Input
Text Area
Regular Selectbox

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.

Regular Input
Password
Input with help text

Help text

Basic elements

Regular Input
Password
Input with help text

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.

Large input
Default input
Small input

Control sizes

Large input
Default input
Small input

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.

Disabled state
Readonly input

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.

Warning label

Help text

Success label

Help text

Error label

Help text

Validation states

Warning label
Success label
Error label

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.

Username
perm_identity
Password
https

Input fields with icons

Username
perm_identity
Password
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.

Text Area

Normal textarea

Text Area

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.

On
Option one is this and that—be sure to include why it's great
Option two is disabled
On
Option one is this and that—be sure to include why it's great
Option two is disabled

##

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

1 2 3

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

Option one is this and that—be sure to include why it's great
Option one is this and that—be sure to include why it's great
Option three is disabled
Option one is this and that—be sure to include why it's great
Option one is this and that—be sure to include why it's great
Option three is disabled

##

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

1 2 3

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