Overview
For design guidance, see the page on text fields .Props
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
label | Label for the text field | string | — | true |
clearAriaLabel | Value of the aria-label for clear button | string |
'Clear'
| — |
value | Value of the text field | string|number |
null
| — |
invalid | Whether or not the current value is invalid | boolean |
false
| — |
invalidText | Text conditionally displayed based on values of invalid and showInvalidText | string |
null
| — |
showInvalidText | Show the invalidText even if the user has not focused or change the input.
invalid must also be true for this to take effect. | boolean |
false
| — |
disabled | Whether or not the field is disabled | boolean |
false
| — |
autofocus | Whether or not to autofocus | boolean |
false
| — |
maxlength | Maximum number of characters for value | number |
null
| — |
autocomplete | HTML5 autocomplete attribute ( off, on, name, username, current-password, etc) | string |
null
| — |
autocapitalize | HTML5 autocapitalize attribute. Used for touch-input enabled UI ( off, on, words, etc) | string |
null
| — |
type | HTML5 type of input ( text, password, number, etc.) | string |
'text'
| — |
min | Minimum value (when value type is number) | number |
null
| — |
max | Maximum value (when value type is number) | number |
null
| — |
textArea | Whether to display as a multi-line text area | boolean |
false
| — |
clearable | When set to true, the component displays a clear button inside the input field. | boolean |
false
| — |
Events
| Name | Description |
|---|---|
input | Emitted on each change with new value |
keydown | Emitted with keydown events |
blur | — |
focus | — |
Methods
| Name | Description |
|---|---|
focus | Puts keyboard focus in the text field |