README
TextField Component
About
This is a component published as its own package from our component library monorepo: https://github.com/BenefitsDataTrust/ui-components. Setup instructions, as well as higher-level goals and concerns can be found from the main project README.
Description
Handles display of text fields according to style guide.
API
| prop | type | required | default | explanation |
|---|---|---|---|---|
| className | string | no | "" | Adds an optional classname to the text field |
| id | string | yes | no | Input id attr |
| value | string | no | no | Input value |
| defaultValue | string | no | no | Input default value |
| required | boolean | no | false | Determines if the input is required |
| name | string | no | no | Input name attr |
| inputRef | any | no | no | React ref for input |
| placeholder | string | no | no | Input placeholder text |
| autoComplete | enum("on", "off") | no | undefined | Input autoComplete attr |
| autoFocus | boolean | no | false | Input autoFocus attr |
| disabled | boolean | no | undefined | Determines input disabled state |
| helperText | string | no | no | Input helper text |
| onChange | function | no | undefined | Event handler for onchange events |
| onSearchCancel | function(e: event) | no | () => {} | Event handler for the cancel search click |
| type | enum("text", "date", "email", "password", "number", "search") | no | "text" | Determines text field type |
| hasSuccess | boolean | no | undefined | Determines success state |
| hasError | boolean | no | undefined | Determines error state (if the error array is not empty) |
| leadingIcon | React element OR false | no | false | Shows the icon in the leading position |
| trailingIcon | React element OR false | no | false | Shows the icon in the trailing position |
| size | number | no | 50 | Determines the value for the size attr |
| fullWidth | boolean | no | false | Sets full width, overriding size attr |
| min | number | no | undefined | Sets min attr for numerical inputs |
| max | number | no | undefined | Sets max attr for numerical inputs |
| noBottomMargin | boolean | no | false | Removes bottom margin of input for more control over formatting |
| step | number | no | 1 | Sets step attr for numerical inputs |
| testId | string | no | "" | Allows an id to be added for testing purposes via the data-testid attr |
| minLength | number | no | undefined | Sets minLength attr for text inputs. Warning: this makes use of the native minLength input attr which depends on the utilization of the :invalid pseudo-class. Consider using onBlur for more complex validations with state. |
| maxLength | number | no | undefined | Sets maxLength attr for text inputs. Warning: this makes use of the native maxLength input attr. Consider using onBlur for more complex validations with state |
| onBlur | function(e: event) | no | () => {} | Event handler for onblur events |
| readOnly | boolean | no | false | Property that prevents the user from entering text in the input |