# XlReactWidgetRadioGroup

Component for the creation of the custom radio buttons group.
You can define your own color for each radio button.

### Summary

* [Exports](#exports)
* [Playground](#playground)
* [Properties](#properties)
* [Example](#example)

### Exports
```text
- XlReactWidgetRadioGroup
```

### Playground
* [Radio Widget](https://xebialabs.github.io/xl-react-components/kitchen-sink.html#/widget/widgetRadioGroup1)

### Properties
- **disabled** - (boolean) - whether the widget is disabled along with all its children
- **message** - (xlMessageTypeProp) - overrides default warning/error message provided in validator with provided text here
- **model** - (object) - defines color, label and value of individual group members and controls the current checked member
- **name** - (string) - gives HTML name to an element. It's important when component is a part of the form
- **onModelChange** - (function) - triggers once model is changed
- **onPristinityChange** - (function) - triggers once pristinity is changed
- **separatorLabel** - (string) - string with which to separate group members

### Example
```jsx
import {XlReactWidgetRadioGroup} from 'xl-react-components';

<XlReactWidgetRadioGroup
    model=[{
        color: 'blue',
        label: 'Case 1',
        value: 'Case 1'
    }, {
        checked: true,
        color: 'yellow',
        label: 'Case 2',
        value: 'Case 2'
    }, {
        color: 'red',
        label: 'Case 3',
        value: 'Case 3'
    }]
    name="radioGroup"
/>
};
```
