# Select

To implement Select component into your project you'll need to add the import:

```jsx
import { Select } from '@kiwicom/orbit-react-native';
```

After adding import into your project you can use it simply like:

```jsx
<Select options={Option} />
```

## Props

Table below contains all types of the props available in the Select component.

| Name            | Type                         | Default    | Description                                                                                                                                    |
| :-------------- | :--------------------------- | :--------- | :--------------------------------------------------------------------------------------------------------------------------------------------- |
| customValueText | `string`                     |            | The custom text alternative of current value. [See Functional specs](#functional-specs)                                                        |
| disabled        | `boolean`                    | `false`    | If `true`, the Select will be disabled.                                                                                                        |
| error           | `React.Node`                 |            | The error message for the Select. [See Functional specs](#functional-specs)                                                                    |
| help            | `React.Node`                 |            | The help message for the Select.                                                                                                               |
| label           | `string`                     |            | The label for the Select.                                                                                                                      |
| name            | `string`                     |            | The name for the Select.                                                                                                                       |
| onChange        | `(event) => void \| Promise` |            | Function for handling onChange event.                                                                                                          |
| **options**     | [`Option[]`](#option)        |            | The content of the Select, passed as array of objects.                                                                                         |
| placeholder     | `string`                     |            | The placeholder for the Select.                                                                                                                |
| prefix          | `React.Node`                 |            | The prefix component for the Select. [See Functional specs](#functional-specs)                                                                 |
| size            | [`enum`](#enum)              | `"normal"` | The size of the Select.                                                                                                                        |
| spaceAfter      | `enum`                       |            | Additional `marginBottom` after component. [See this docs](https://github.com/kiwicom/orbit-components/tree/master/src/common/getSpacingToken) |
| value           | [`Option`](#option)                     |        | The value of the Select.                                                                                                                       |
| nativeID        | `string`                     |            | Used to locate this view from native classes. (This disables the 'layout-only view removal' optimization for this view!)                       |
| required        | `boolean`                    |            | If true, the Select is displayed as required.                                                                                                  |

## Option

Table below contains all types of the props available for object in Option array.

| Name      | Type               | Description               |
| :-------- | :----------------- | :------------------------ |
| **value** | `string \| number` | The value of the Option.  |
| label     | `string`           | The label for the Option. |

### enum

| size       |
| :--------- |
| `"small"`  |
| `"normal"` |

## Functional specs

- The `error` prop overwrites the `help` prop, due to higher priority.

- When you have limited space of `Select`, you can use `customValueText` property where you can pass text alternative of the current value. For instance, when label of selected option has `Czech Republic (+420)`, you can pass only `+420` into this property and the original label will be visually hidden.