The Select component is a styled select drop-down form input that can be used as a controlled or uncontrolled component.
npm install @paprika/selectThe Select component is a styled select drop-down form input that can be used as a controlled or uncontrolled component.
``
yarn add @paprika/select
or with npm:
`
npm install @paprika/select
| Prop | Type | required | default | Description |
| ------------ | ----------------------------------------------------------------------------- | -------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| a11yText | string | false | null | Provides a non-visible label for this select element for assistive technologies. |
| children | node | false | null | List of options as standard option elements. |
| defaultValue | string | false | null | Sets the default selected value for an uncontrolled component. |
| hasError | bool | false | false | If true displays a red border around select element to indicate error. |
| isDisabled | bool | false | false | If true it makes the select element disabled. |
| isReadOnly | bool | false | false | If true it makes the select element read only. |
| onChange | func | false | () => {} | Callback to be executed when the selected value is changed. Receives the onChange event as an argument. Required when value prop is provided (component is controlled). |
| placeholder | string | false | null | Display value for a disabled first option with an empty string value. |
| size | [ Select.types.size.SMALL, Select.types.size.MEDIUM, Select.types.size.LARGE] | false | Select.types.size.MEDIUM | Specifies the visual size of the select element. |
| value | string | false | undefined | The selected value for the select element. |
All props and attributes are spread onto the root container
element.Usage
The
To use it as an uncontrolled component:
js
import Select from "@paprika/select";
...
const refSelect = React.useRef();
...
ref={refSelect}
>
...
refSelect.current.value // latest value
`To access the value of an uncontrolled component, you can pass a handler function for the
prop that will have the event as an argument. You can use the event.target.value as needed.Alternatively, you can include a
ref on the component and access ref.current.value` at any time.- Storybook Showcase
- GitHub source code
- Create GitHub issue
- CHANGELOG