@bdt-component-library/select
v0.13.0
Published
Select component
Downloads
85
Readme
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.
- https://zeroheight.com/990ea04ab/p/422d4b-selects
API
| prop | type | required | default | explanation | |-----------|--------|----------|---------|--------------| | className | string | no | "" | Adds an optional classname to the component | | children | React element | React element[] | yes | n/a | Handles the Select option contents | | compact | boolean | no | no | false | Uses reduced height for Select field (useful in other components like Pagination) | | 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 |