2019-07-25 14:29:50 +00:00
# RadioButtonGroup
#### Description
2019-07-25 15:09:46 +00:00
RadioButtonGroup allow you to add group radiobuttons
2019-07-25 14:29:50 +00:00
#### Usage
```js
import { RadioButtonGroup } from 'asc-web-components';
2019-07-25 15:09:46 +00:00
< RadioButtonGroup
name='fruits'
selected='banana'
options={
[
{ value: 'apple', label: 'Sweet apple', disabled: true },
{ value: 'mandarin', label: 'Mandarin'},
{ value: 'banana', label: 'Banana'},
{ value: 'Mandarin'}
]
}
/>
2019-07-25 14:29:50 +00:00
```
#### Properties
| Props | Type | Required | Values | Default | Description |
| ---------------------- | -------- | :------: | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
2019-07-25 15:09:46 +00:00
| `name` | `string` | ✅ | - | - | Used as HTML `name` property for `<input>` tag. Used for identification RadioButtonGroup
| `selected` | `string` | ✅ | - | - | Value of the selected radiobutton
2019-07-25 15:39:25 +00:00
| `options` | `arrayOf` | ✅ | - | - | Radiobuttons data: it is array of objects, each of this can include next information: `value` (required), `label` , `disabled`
2019-07-26 09:42:30 +00:00
| `spacing` | `number` | - | - | 33 | Margin (in px) between radiobuttons
| `isDisabled` | `bool` | - | - | `false` | Disabling all radiobuttons in group
2019-07-26 09:33:34 +00:00
| `onClick` | `func` | - | - | - | Allow you to handle clicking events on radiobuttons
2019-07-25 15:09:46 +00:00
#### Prop `options`
| Name | Type | Required | Values | Default | Description |
| ---------------------- | -------- | :------: | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
| `value` | `string` | ✅ | - | - | Used as HTML `value` property for `<input>` tag. Used for identification each radiobutton
| `label` | `string` | - | - | - | Name of the radiobutton. If missed, `value` will be used
| `disabled` | `bool` | - | - | `false` | Used as HTML `disabled` property for each `<input>` tag