# Select

## Preview

![](https://3422846761-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGP0U4aBj2zuNdsU1Qu%2F-LH2W-G0D7-G3bv3bvG5%2F-LH2W5OZYFNXuZXooa7N%2Fselect.png?alt=media\&token=0b6cdcfe-7a8f-41ce-8dd9-a15741f44af0)

## Code sample

```jsx
import { Select } from '@dormakaba/digital-reactnative-visual';

// data structures
const data = [
  { key: 's_0', section: true, label: 'Fruits' },
  { key: 'f_0', label: 'Red Apples' },
  { key: 's_2', section: true, label: 'Vegetables' },
  { key: 'v_0', label: 'Beets' },
  { key: 'v_1', label: 'Red Peppers' }
];

<Select
  data={data}
  label="fruit or vegi"
  placeholder="select some food"
  value={"f_0"}
  onChange={(item) => {}}
/>
```

## Props

| **Name**     | **Type** | **Description**                                                        |
| ------------ | -------- | ---------------------------------------------------------------------- |
| data         | array    | Data structure like shown in the sample                                |
| label        | string   | The label to show about the select element                             |
| placeholder  | string   | Value to show when having no selection                                 |
| value        | string   | key of selected element                                                |
| onChange     | function | returns the object selected `{ key, value }`                           |
| \*           | boolean  | set label style: `bold`, `info`, `success`, `warning`, `error`         |
| disabled     | boolean  | disabled state                                                         |
| noMargin     | boolean  | removes the 10px margin top                                            |
| offlineAware | boolean  | disable if offline                                                     |
| isOffline    | boolean  | is currently offline if set offlineAware will toggle state to disabled |