# RadioButton
Компонент для создания радиогруппы.
## Пример использования
Конфигурация темы на уровне проекта:
```ts
// src/lib/theme.ts
import { configureRootTheme } from '@yandex-lego/components/Theme'
import { theme } from '@yandex-lego/components/Theme/presets/default'
configureRootTheme({ theme })
```
Использование с нужным набором модификаторов:
```ts
// src/App.ts
import React, { useState } from 'react'
import { compose } from '@bem-react/core'
import {
RadioButton as RadioButtonDesktop,
withSizeM,
withViewDefault,
} from '@yandex-lego/components/RadioButton/desktop'
const RadioButton = compose(withSizeM, withViewDefault)(RadioButtonDesktop)
const App = () => {
const [value, setValue] = useState('value1')
return (
Радио 2 },
{ value: 'value3', children: <>Радио 3 },
]}
onChange={(event) => setValue(event.target.value)}
/>
)
}
```
Использование с полным набором модификаторов:
```ts
// src/App.ts
import React from 'react'
import { RadioButton } from '@yandex-lego/components/RadioButton/desktop/bundle'
const App = () => {
const [value, setValue] = useState('value1')
return (
Радио 2 },
{ value: 'value3', children: <>Радио 3 },
]}
onChange={(event) => setValue(event.target.value)}
/>
)
}
```
## Примеры
### Оформление радиогруппы
Для различного оформления радиогруппы установите свойство `view` в значение `"default"`.
{{%story::desktop:controls-radiobutton-desktop--view%}}
### Размер радиогруппы
Чтобы изменить размер радиогруппы, установите свойство `size` в одно из следующих значений: `"s"`, `"m"`, `"l"`.
{{%story::desktop:controls-radiobutton-desktop--size%}}
## Свойства
| Свойство | Тип | Описание |
| ----------- | ----------------------------------------------------------- | ----------------------------------------------- |
| options | `IRadioButtonOption[]` | Набор опций |
| innerRef? | `RefObject` | Ссылка на корневой DOM-элемент компонента |
| style? | `CSSProperties` | Пользовательские стили на корневом DOM-элементе |
| aria-label? | `string` | Метка для радиогруппы |
| value | `string` | HTML-атрибут `value`, значение контрола |
| name? | `string` | HTML-атрибут `name`, имя компонента |
| disabled? | `false \| true` | HTML-атрибут `disabled` |
| className? | `string` | Дополнительный класс |
| onClick? | `(event: MouseEvent) => void` | Обработчик клика |
| onChange? | `(event: ChangeEvent) => void` | Обработчик изменения значения |