Skip to main content
Version: 1.0.3

RadioButton

Overview

The RadioButton component allows the user to select one out of several options.


Specification

Property

Here is a list of properties that can be used for modifying the component:

NameTypeDefaultDescriptionRemark
classNamestring""Component class name
errorstring""Text to be displayed in errorError will not be displayed if unspecified or left empty
idstring""Component id name
itemLayoutstring"horizontal"Orientation for displaying the optionsAvailable options:
"horizontal" : Horizontal
"vertical" : Vertical
labelstring""Label for the componentLabel will not be displayed if unspecified or left empty
valuestring""Selected valueNo option will be selected if the value is unspecified
borderVisiblebooleantrueShow/Hide the border
disabledbooleanfalseEnable/Disable the component
requiredIconbooleanfalseShow/Hide the required icon
visiblebooleantrueShow/Hide the component
itemsArray<Item>[]List of options to select fromWill result an error if the value of items is not an array
Item.labelstringnullText for each optionIf Item.label is unspecified, the value of Item.value is displayed on the UI
Item.valuestringnullValue of each optionWill result an error if there is duplicated value in Item.value

Event

Here is a list of events that can be specified:

NameTypeDescriptionRemark
changefunctionEvent handler when the value has been changedIt will pass the event object as the argument

You can receive the following values in event.detail
event.detail.oldValue : Value before the change
event.detail.value : Value after the change

Constructor

RadioButton(options)
Here is a list of available constructors:

Parameter

NameTypeDefaultDescriptionRemark
optionsobject{}Object that includes component properties

Sample Code

Here is a sample code when all parameters are specified:

const space = kintone.app.record.getSpaceElement('space');
const radioButton = new Kuc.RadioButton({
label: 'Fruit',
requiredIcon: true,
items: [
{
label: 'orange',
value: 'Orange'
},
{
label: 'apple',
value: 'Apple'
}
],
value : 'Orange',
itemLayout: 'horizontal',
error: 'Error occurred!',
className: 'options-class',
id: 'options-id',
visible: true,
disabled: false,
borderVisible: true
});
space.appendChild(radioButton);

radioButton.addEventListener('change', event => {
console.log(event);
});