@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