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={
|
|
|
|
[
|
2019-07-26 11:38:44 +00:00
|
|
|
{ value: 'apple', label: 'Sweet apple'},
|
2019-07-25 15:09:46 +00:00
|
|
|
{ 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-26 11:38:44 +00:00
|
|
|
| `options` | `arrayOf` | ✅ | - | - | Array of objects, contains props for each `<RadioButton />` component
|
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 11:38:44 +00:00
|
|
|
| `onClick` | `func` | - | - | - | Allow you to handle clicking events on `<RadioButton />` component
|