Input Field
The input field accepts data. A wide variety of types of input data are available.
You will be able to select a wide variety of data type from Type drop down:
| Type | Description |
|---|---|
| Text | The default value. A single-line text field. Line-breaks are automatically removed from the input value. |
| Number | A control for entering a number. Displays a spinner and adds default validation when supported. Displays a numeric keypad in some devices with dynamic keypads. |
| Date | A control for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day when active in supporting browsers. |
| Date Time Local | A control for entering a date and time, with no time zone. Opens a date picker or numeric wheels for date- and time-components when active in supporting browsers. |
| Time | A control for entering a time value with no time zone. |
| Month | A control for entering a month and year, with no time zone. |
| Week | A control for entering a date consisting of a week-year number and a week number with no time zone. |
| A field for editing an email address. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards. | |
| Password | A single-line text field whose value is obscured. Will alert user if site is not secure. |
| Telephone | A control for entering a telephone number. Displays a telephone keypad in some devices with dynamic keypads. |
| Color | A control for specifying a color; opening a color picker when active in supporting browsers. |
Form Field is the wrapper to the input field. Following are the variants you will be able to select:
| Form Field | Description |
|---|---|
| Legacy | Legacy shows the input box with an underline underneath it. |
| Standard | The standard appearance is a slightly updated version of the legacy appearance that has spacing that is more consistent with the fill and outline appearances. |
| Fill | The fill appearance displays the form field with a filled background box in addition to the underline. |
| Outline | The outline appearance shows the form field with a border all the way around, not just an underline. |
| No Form Field | No wrapper is shown. |
| Browser Input | The standard browser input with the label and the input field. |
The Label is used to associate a text label with a input field. The label is used to tell users the value that should be entered in the associated input field.
The Placeholder is text shown when the label is floating but the input is empty. It is used to give you an additional hint about what they should type in the input.
Hint labels are additional descriptive text that appears below the form field's underline.