Select 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 select fields according to style guide conventions.
This component is intended to be used with the Option component for display of options, but it will accept any valid react elements as children.
API
| prop | type | required | default | explanation |
|---|---|---|---|---|
| className | string | no | "" | Adds an optional classname to the component |
| children | React element | React element[] | yes | n/a |
| compact | boolean | no | no | false |
| label | string | yes | no | Text for input label |
| id | string | yes | no | Input id attr |
| selected | string | no | "" | Selected option name |
| disabled | boolean | no | undefined | Determines input disabled state |
| required | boolean | no | false | Determines input required state |
| multiSelect | boolean | no | false | Determines if the input is multiselect (not implemented currently) |
| placeholder | string | no | "" | Adds placeholder for the input |
| noBottomMargin | boolean | no | false | Determines whether or not there is a bottom margin around selects |
| helperText | string | no | undefined | Adds optional helper text to input |
| readOnly | boolean | no | false | Property that prevents the user from entering text in the input |
| hasSuccess | boolean | no | false | Determines success state |
| hasError | boolean | no | false | Determines error state |