Skip to main content
Version: 1.17.1

MobileRadioButton

Overview

The MobileRadioButton 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
labelstring""Label for the componentLabel will not be displayed if unspecified or left empty
value *1string""Selected valueNo option will be selected if the value and selectedIndex are unspecified
If setting duplicated value and not setting selectedIndex, the first mapped value item in Item.value will be selected and selectedIndex will be the index number
Will result an error if the value is not a string
selectedIndex *1number-1Index of selected itemIt supports specifying which duplicated Item.value will be selected if there is duplicated Item.value in items
If value is not set and selectedIndex is valid, item that has the index number will be selected
If value is set with duplicated Item.value and selectedIndex value maps with duplicated Item.value specified in value, the item that has the index number will be selected
Will result an error if the value of selectedIndex is not a number
borderVisiblebooleantrueShow/Hide the border
disabledbooleanfalseEnable/Disable the component
requiredIconbooleanfalseShow/Hide the required icon
visiblebooleantrueShow/Hide the component
itemsArray<Item>[]List of options to displayWill result an error if the value of items is not an array
info

*1: You can set duplicated value in Item.value. In case setting duplicated value, you can handle selected item using value and selectedIndex property.
Example: When setting items = [{label: 'Orange', value: 'fruit'}, {label: 'Apple', value: 'fruit'}, {label: 'Carrot', value: 'vegetable'}]

  • If setting value and not setting selectedIndex as follows:

    • value = 'fruit': The first item will be selected.
    • value = 'other': No item will be selected.
  • If not setting value and setting selectedIndex as follows:

    • selectedIndex = 1: The second item will be selected.
    • selectedIndex = 99: No item will be selected.

Item

NameTypeDefaultDescriptionRemark
labelstringnullText for each optionIf Item.label is unspecified, the value of Item.value is displayed on the UI
valuestringnullValue of each optionCan set duplicated value in Item.value
disabledbooleanfalseEnable/Disable each option

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

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

Parameter

NameTypeDefaultDescriptionRemark
optionsobject{}Object that includes component properties

Sample Code

tip

Please check the package installation method first.

Here is a sample code when all parameters are specified:

const Kuc = Kucs['1.x.x'];

const space = kintone.mobile.app.record.getSpaceElement('space');

const mobileRadioButton = new Kuc.MobileRadioButton({
label: 'Fruit',
requiredIcon: true,
items: [
{
label: 'orange',
value: 'Orange'
},
{
label: 'apple',
value: 'Apple',
},
{
label: 'banana',
value: 'Banana',
disabled: true
},
],
value: 'Orange',
selectedIndex: 0,
error: 'Error occurred!',
className: 'options-class',
id: 'options-id',
visible: true,
disabled: false,
borderVisible: true
});
space.appendChild(mobileRadioButton);

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