# Text Field

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 Text Area

Floating Textarea