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

# RadioList

RadioList is pretty similar to Select. You have the list where user can choose only one option. Each list has unique name, you cannot use the same name for some RadioLists. 

In **Altrone 1.2** Option interface was redesigned and since this version you can pass generic argument with value type to the RadioList. 

```tsx
import {} from 'altrone-ui';

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

const [value, setValue] = useState('AL')

return <RadioList
    name="states"
    options={STATES}
    value={value}
    onChange={setValue}
/>
```

{% embed url="<https://apcom52.github.io/altrone-ui/?path=/story/forms--radio-list-example>" %}
RadioList Demo
{% endembed %}

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

| Property                                              | Type                                                 | Description                                         |
| ----------------------------------------------------- | ---------------------------------------------------- | --------------------------------------------------- |
| **`name`**<mark style="color:red;">**`*`**</mark>     | `string`                                             | Name of the group                                   |
| **`options`**<mark style="color:red;">**`*`**</mark>  | [`Option<T>`](/altrone-ui/utils/types/option.md)`[]` | List of the possible options                        |
| **`value`**<mark style="color:red;">**`*`**</mark>    | `T`                                                  | Selected option                                     |
| **`onChange`**<mark style="color:red;">**`*`**</mark> | `(value: T) => void`                                 | Callback is called when user chooses another option |
| **`direction`**                                       | [`Direction`](/altrone-ui/utils/enums/direction.md)  | Direction of the list                               |
| **`disabled`**                                        | `boolean`                                            | Marks the list as disabled                          |

## History

* **`Altrone 1.2`**
  * added generic
* **`Altrone 1.0`**: initial release