NumberField 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 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

API

| 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 |