Form Elements
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.
Input fields with icons
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.