> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/components/forms/scrollableselector.md).

# ScrollableSelector

This component is a variant of Select which was separated into a separate component. This component provides an excellent and convenient user experience on mobile devices. Also Select uses ScrollableSelector on mobile devices. 

```tsx
import { ScrollableSelector, Option } from 'altrone-ui';

const OPTIONS: Option<string> = [
    { label: "Alabama", value: "AL" },
    { label: "Alaska", value: "AK" },
    ...
]

const [value, setValue] = useState("AL");

return <ScrollableSelector value={value} options={OPTIONS} onChange={setValue} />
```

## Properties <mark style="color:orange;">\<T></mark>

| Property                                              | Type                                     | Description                                    |
| ----------------------------------------------------- | ---------------------------------------- | ---------------------------------------------- |
| **`value`**<mark style="color:red;">**`*`**</mark>    | T                                        | Selected value                                 |
| **`options`**<mark style="color:red;">**`*`**</mark>  | Option\<T>\[]                            | List of the options                            |
| **`onChange`**<mark style="color:red;">**`*`**</mark> | (value: T) => void                       | Callback is called when user chooses new value |
| **`disabled`**                                        | boolean                                  | Marks select as disabled                       |
| **`align`**                                           | Align                                    | Set alignment of the list                      |
| **`ScrollableSelectorOptionComponent`**               | React.FC\<ScrollableSelectorOptionProps> | Custom Option component                        |
| **`className`**                                       | string                                   | Custom CSS class                               |

## History

* **`Altrone 1.2`**:
  * added `ScrollableSelectorOptionComponent` prop
* **`Altrone 1.0`**: initial release