The input is a single-line text field for user-inputted data.
Example
⌘ Cmd + ⌥ Option + 1
Properties
| property | propType | required | default | description |
|---|---|---|---|---|
| note | string | - | null | Form note for the input |
| defaultValue | string | - | - | The default value of the input used on initial render |
| displayError | bool | - | - | Includes search icon if true |
| isDisabled | bool | - | - | Prevents input from being modified and appears disabled |
| isFilter | bool | - | - | Includes error if true |
| isOptional | custom | - | - | Adds an optional label if there is a label provided @param {Object} props Object of props @returns {Error} Error or null |
| isReadOnly | bool | - | - | Prevents input from being modified but doesn't appear disabled |
| isRequired | bool | - | - | Prevents input from being submitted without value |
| label | string | - | - | Text that describes the input |
| max | number | - | - | Max value for the `input`. Should be used only when `type` is `number`. |
| maxLength | number | - | - | Max length of the input value. Should be used only when type is 'text', 'email', 'search', 'password', 'tel', or 'url'. |
| min | number | - | - | Min value for the `input`. Should be used only when `type` is `number`. |
| onBlur | func | - | - | Function that fires when the input loses focus. It fires regardless of whether the value has changed. |
| onChange | func | - | - | Function that fires when the input loses focus after the value changes |
| onFocus | func | - | - | Function that fires when the input gains focus |
| onInput | func | - | - | Function that fires on keypress |
| onKeyDown | func | - | - | Function that fires when a key is pressed down |
| placeholder | string | - | - | Input placeholder text |
| step | string | - | - | Input step value |
| testSection | string | - | - | Hook for automated JavaScript tests |
| textAlign | oneOf 'left' | 'right' | - | - | Align text inside input. Default is left. |
| type | oneOf 'text' | 'password' | 'date' | 'number' | 'email' | 'url' | 'search' | 'tel' | yes | - | Supported input types |
| value | string | number | - | - | Text within the input |
Usage
Use an input field when requesting text or numeric input from the user.
Best Practices
Do
Make input field widths consistent
Don't
Use an input for read-only data