Radio group

JointJS+ provides a RadioGroup UI widget for displaying radio groups.

Installation

Import the RadioGroup from the ui namespace and create a new instance of it.

import { ui } from '@joint/plus';

const radioGroup = new ui.RadioGroup({
    name: 'myRadioGroup',
    options: [{
        content: 'Value 1',
        value: 1
    }, {
        content: 'Value 2',
        value: 2
    }, {
        content: 'Value 3',
        value: 3
    }]
});

document.body.appendChild(radioGroup.render().el);

There is also a UMD version available

Include joint.ui.radioGroup.js and joint.ui.radioGroup.css files to your HTML:

index.html

<link href="joint.ui.radioGroup.css" rel="stylesheet" type="text/css">
<script src="joint.js"></script>
<script src="joint.ui.radioGroup.js"></script>

And access the RadioGroup through the joint.ui namespace:

index.js

const radioGroup = new joint.ui.RadioGroup({
    name: 'myRadioGroup',
    options: [{
        content: 'Value 1',
        value: 1
    }, {
        content: 'Value 2',
        value: 2
    }, {
        content: 'Value 3',
        value: 3
    }]
});

document.body.appendChild(radioGroup.render().el);

How does RadioGroup work?

Create an object of ui.RadioGroup type, render it with the render() method and append the generated HTML element anywhere in your DOM.

Please see the demo for reference on how to do that if you're in doubts:

Open Sandbox