> 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/select.md).

# Select

Select component provides opportunity to choose one option from the list. It is similar to [RadioList](/altrone-ui/components/forms/radiolist.md) component, but has more features. It can provide search, grouping and clearable features. 

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

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

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

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

{% embed url="<https://apcom52.github.io/altrone-ui/?path=/docs/forms-select--documentation>" %}
Select Demo
{% endembed %}

## Search

When your Select has a big number of options it is better to provide search field for selecting the right option. For that cases you have to set `searchable` prop to `true`. If you have complex values, most probably you have to set custom `searchFunc` as well.&#x20;

When user clicked on the select he immediately has a search field in which he enters a search query and he sees in the list only those elements that suit him.&#x20;

## Option Grouping

Like in basic HTML `<select`> you can group your options into `<optgroup>`, in Select you have similar functionality. Each Option in Select has optional `parent` field. When all your options will be grouped into different groups by `parent` field. Options with empty `parent` field will be grouped into group "Other".&#x20;

You can set human-readable title of the groups via `parents` prop. This is an array of configurations for groups of options. Also you can disable entire group.

### <mark style="color:blue;">OptionParent</mark>

```typescript
interface OptionParent {
  label: string;
  value: null | string;
  disabled?: boolean;
}
```

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

|                                                       |                                                                                             |                                                                                    |
| ----------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
| **`value`**<mark style="color:red;">**`*`**</mark>    | `T`                                                                                         | Selected option                                                                    |
| **`options`**<mark style="color:red;">**`*`**</mark>  | [`Option<T>`](/altrone-ui/utils/types/option.md)`[]`                                        | List of the options                                                                |
| **`onChange`**<mark style="color:red;">**`*`**</mark> | `(value: T) => void`                                                                        | Callback is called when user selects an option                                     |
| **`parents`**                                         | [`OptionParent`](#optionparent)`[]`                                                         | List of groups of the options                                                      |
| **`searchable`**                                      | `boolean`                                                                                   | If `true` user can search throughout the list of options. Default value is `false` |
| **`clearable`**                                       | `boolean`                                                                                   | If `true` user can select undefined option. Default value is `false`               |
| **`searchFunc`**                                      | `(searchTerm: string, item:` [`Option<T>`](/altrone-ui/utils/types/option.md)`) => boolean` | Custom search function (when `searchable` is true)                                 |
| **`ItemComponent`**                                   | `React.FC<SelectOptionProps>`                                                               | Custom Select option component                                                     |
| **`size`**                                            | [`Size`](/altrone-ui/utils/enums/size.md)                                                   | Size of the Select                                                                 |
| **`errorText`**                                       | `string`                                                                                    | Error message                                                                      |
| **`hintText`**                                        | `string`                                                                                    | Hint text                                                                          |
| **`surface`**                                         | [`Surface`](/altrone-ui/utils/enums/surface.md)                                             | Surface of the Select                                                              |
| **`elevation`**                                       | [`Elevation`](/altrone-ui/utils/enums/elevation.md)                                         | Elevation of the Select                                                            |
| **`classNames`**                                      | `{ select?: string; currentValue?: string; menu?: string; option?: string; }`               | Custom CSS class                                                                   |

## History

* **`Altrone 2.0`**:
  * added `surface` prop
  * added `elevation` prop
* **`Altrone 1.2`**:
  * added `clearable` prop
* **`Altrone 1.0`**: initial release