npm package: @paprika/select
Description: The Select component is a styled select drop-down form input that can be used as a controlled or uncontrolled component.
Author: @paprika
Latest version: 2.0.20

<!-- start: Autogenerated - do not modify -->

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

<!-- end: Autogenerated - do not modify -->
<!-- content -->

### 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:

```js
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:

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

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/forms-select--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/Select/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/select%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/Select/CHANGELOG.md)