@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