NumberField component
npm install @bdt-component-library/number-fieldThis 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.
Handles numerical input with custom buttons for incrementing/decrementing. At this time, the component only handles controlled inputs, meaning that it cannot have an undefined value or a placeholder.
- https://zeroheight.com/990ea04ab/p/98b6fb-input-fields/t/2672c9
| prop | type | required | default | explanation |
|-----------|--------|----------|---------|--------------|
| className | string | no | "" | Adds an optional classname to the field |
| id | string | yes | no | Input id attr |
| value | number | yes | n/a | Input value |
| tabIndex | number | no | undefined | Allows us to supply a tabindex attr to the input |
| required | boolean | no | false | Determines if the input is required |
| name | string | no | "" | Input name attr |
| disabled | boolean | no | false | Determines input disabled state |
| onChange | function(e: event, val: number) | yes | n/a | Event handler for onchange events |
| hasSuccess | boolean | no | false | Determines success state |
| hasError | boolean | no | false | Determines error state |
| min | number | no | undefined | Sets min attr for input |
| max | number | no | undefined | Sets max attr for input |
| noBottomMargin | boolean | no | false | Removes bottom margin of input for more control over formatting |
| step | number | no | 1 | Sets step attr for input |
| testId | string | no | "" | Allows an id to be added for testing purposes via the data-testid attr |
| 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 |