# Select

A customizable UI component for selecting from a list of options.

## Props

| Prop           | Type          | Description                                                                                                                               | Default |
| ---------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| options          | { label: string; value: string }[] | Array of options for the select box.                                                                                                     |         |
| label            | string        | Label for the select box.                                                                                                                               |         |
| placeholder      | string        | Placeholder text for the select box.                                                                                                                      |         |
| error            | boolean       | Flag to indicate if the select has an error state.                                                                                                       | false   |
| helperText       | string        | Helper text that appears below the select box.                                                                                                            |         |
| shadow           | Shadow        | Determines the shadow property of the select component.                                                                                                  |         |
| styles           | CSSProperties | Optional custom styles for the select component.                                                                                                        |         |
| className        | string        | Optional className for the select component.                                                                                                          |         |
| isScrollable     | boolean       | Boolean to control whether the select options are scrollable                                                                                             | true    |

### **Import**
  ```tsx
  import { Select } from '@app-studio/web';
  ```

### **Default**
```tsx
import React from 'react';
import { Select } from '@app-studio/web';

export const DefaultSelect = () => (
  <Select
    options={[
      { label: 'Item1', value: '1' },
      { label: 'Item2', value: '2' },
      { label: 'Item3', value: '3' },
    ]}
    label="Select an item"
  />
);

```

### **error**
Flag to indicate if the select has an error state

```tsx
import React from 'react';
import { Select } from '@app-studio/web';

export const ErrorSelect = () => (
  <Select
    id="error"
    name="error"
    error
    options={[
      { label: 'Item1', value: '1' },
      { label: 'Item2', value: '2' },
      { label: 'Item3', value: '3' },
    ]}
  />
);

```

### **helperText**
Helper text that appears below the select box

```tsx
import React from 'react';

import { Select } from '@app-studio/web';

export const HelperTextSelect = () => (
  <Select
    options={[
      { label: 'Item1', value: '1' },
      { label: 'Item2', value: '2' },
      { label: 'Item3', value: '3' },
    ]}
    helperText="select one item!"
    error
  />
);

```

### **shadow**
Determines the shadow property of the select component

```tsx
import React from 'react';
import { Select } from '@app-studio/web';

export const ShadowSelect = () => (
  <Select
    shadow={{
      boxShadow:
        'rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset',
    }}
    options={[
      { label: 'Item1', value: '1' },
      { label: 'Item2', value: '2' },
      { label: 'Item3', value: '3' },
    ]}
  />
);

```

### **isScrollable**
Boolean to control whether the select options are scrollable

```tsx
import React from 'react';
import { Select } from '@app-studio/web';

export const IsScrollableDemo = () => {
  const timeZones = [
    { label: 'Item1', value: '1' },
    { label: 'Item2', value: '2' },
    { label: 'Item3', value: '3' },
  ];

  return <Select options={timeZones} />;
};

```