JointJS+ RadioGroup


ui.RadioGroup is a UI widget for displaying radio groups.


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

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


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

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


The following table lists options that you can pass to the ui.RadioGroup constructor function.

options An array of options. Each option is an object with the following properties:
content The content of the radio button label. Can be a simple string or a string with a custom html.
value The value of the option. It can be a string, a number or any other JavaScript object.
name Name of the inner input element. By default it is set to the component's cid.


render() Render the radio group. Note that once you render the color palette, you can use the el property that points to the container HTML element and append it anywhere in the DOM (e.g. document.body.appendChild(radioGroup.el)).
selectByValue(value) Select an item in the radio group by its value.
select(index) Select an item in the radio group by its index in the options array.
getCurrentValue() Returns the current value of the radio group.
getSelectionIndex() Returns the index value of the current value.
setOptions(options) Sets new set of options to be rendered inside the radio group component.
remove() Remove the radio group from the DOM.
on(event, handler [, context]) Register a handler function that will be called whenever event is triggered. The optional context is an object that will be the context of the handler function (the this).


The ui.RadioGroup object triggers events that you can react on. Events can be handled by using the on() method (see above).

option:select Triggered when the value of the radio group is selected. The handler passed the current value of the radio group as the first parameter. The second parameter is the RadioGroup object.