@paprika/select

Description

The Select component is a styled select drop-down form input that can be used as a controlled or uncontrolled component.

Installation

yarn add @paprika/select

or with npm:

npm install @paprika/select

Props

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

Select.Container

All props and attributes are spread onto the root container <div> element.

Usage

The <Select> can be used as a controlled or an uncontrolled component.

To use it as a controlled component:

import Select from "@paprika/select";
...
const [value, setValue] = React.useState("Coke");
...
<Select
  value={value}
  onChange={event => setValue(event.target.value)}
>
  <option value="Coke">Coke</option>
  <option value="Pepsi">Pepsi</option>
</Select>

To use it as an uncontrolled component:

import Select from "@paprika/select";
...
const refSelect = React.useRef();
...
<Select
  defaultValue="Coke"
  ref={refSelect}
>
  <option value="Coke">Coke</option>
  <option value="Pepsi">Pepsi</option>
</Select>
...
refSelect.current.value // latest value

To access the value of an uncontrolled component, you can pass a handler function for the onChange 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.

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG