TextArea 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 tabs according to style guide.

• https://zeroheight.com/990ea04ab/p/98b6fb-input-fields/t/457068

API

| prop | type | required | default | explanation | |-----------|--------|----------|---------|--------------| | className | string | no | "" | Adds an optional classname to the textarea | | helperText | string | no | no | textarea helper text | | id | string | yes | no | textarea id attr | | testId | string | no | "" | Adds an optional data-testid for testing purposes | | name | string | no | no | textarea name attr | | value | string | no | no | textarea value | | defaultValue | string | no | no | textarea default value | | disabled | boolean | no | false | Determines input disabled state | | inputRef | any | no | no | React ref for textarea | | required | boolean | no | false | Determines if the textarea is required | | placeholder | string | no | no | textarea placeholder text | | row | number | no | 5 | textarea row value | | column | number | no | 33 | textarea column value | | hasError | boolean | no | false | Determines if the textarea is in an error state (overrides success state) | | hasSuccess | boolean | no | false | Determines if the textarea is in a success state | | onChange | function(event) | no | () => {} | Handles on change events within the textarea html element | | minLength | number | no | undefined | Determines minimum number of characters that can be entered via the minlength textarea attr | | maxLength | number | no | undefined | Determines maximum number of characters that can be entered via the minlength textarea attr | | noBottomMargin | boolean | no | false | Removes bottom margin of input for more control over formatting | | readOnly | boolean | no | false | Property that prevents the user from entering text in the input | | showCharacterCount | boolean | no | false | Property that adds a character count/maxLength indicator to the component |