Radio Buttons

List of buttons that allows the user to select one option from a list of options.

Schema

[
    {
        "name": "connection_method",
        "meta": {
            "displayName": "Connection Method",
            "displayType": "radiobutton",
            "value": "host",
            "readOnly": false,
            "htmlProps": {
                "optionsLayout": "row",
                "labelPlacement": "end", // postion of label for radio button
                "allowDynamic": true
            },
            "validation": {
                "required": true
            },
            "options": [
                {
                    "value": "host",
                    "label": "Host"
                },
                {
                    "value": "uri",
                    "label": "Connection URI"
                }
            ]
        }
    }
]

Example

Form Data:

{}

props

`name`

This field should be a unique string.

`meta` object

The meta object contains properties that define the display characteristics and behavior of the section.

Field	Data Type	Description
`className`	Custom CSS class for the radio control container	string (default: "ripple-radio-buttons-container")
`displayName`	String	It is used to display the name of the field in the form
`displayType`	String	It is used to determine the field type to be displayed. Supported options:
`displayProps`	Object	It is used for field layouting. Refer for details: DisplayType
`htmlProps`	Object	It is used for setting native html attributes to basic form controls like text_field, select, number, password, email etc. Example of such attributes would be like step, min, max for displayType number
`value`	String / Boolean / Number	None
`validation`	Object	For field validation
`dependencies`	Object	Defines relationships and dependencies between various fields. Refer here for details: Dependencies
`isDisabled`	Whether the field is disabled	boolean
`description`	A description text to display under the buttons	string
`readOnly`	A readonly field is not editable and value cannot be changed	boolean

Common Validation Properties

Field	Description
`required`	Marks a field as mandatory
`pattern`	Adds a pattern validation for the field. For email, pattern is supported by default
`patternDetail`	Contains info msg and error msg for pattern validation property
`min`	For Textbox fields, it is the minimum number of characters required for the field. For number fields, it is the minimum value allowed
`max`	For Textbox fields, it is the maximum number of characters allowed. For number fields, it is the maximum value allowed
`minDetail`	Contains error and info msg for min validation property
`requiredDetail`	Contains info msgs about the required validation property

Example JSON

RadioButton with options

[
    {
        "name": "connection_method",
        "meta": {
            "displayName": "Connection Method",
            "displayType": "radiobutton",
            "value": "host",
            "htmlProps": {
                "optionsLayout": "row",
                "labelPlacement": "end"
            },
            "validation": {
                "required": true
            },
            "options": [
                {
                    "value": "host",
                    "label": "Host"
                },
                {
                    "value": "uri",
                    "label": "Connection URI"
                }
            ]
        }
    }
]

RadioButton with default value

[
    {
        "name": "connection_method",
        "meta": {
            "displayName": "Connection Method",
            "displayType": "radiobutton",
            "value": "host",
            "htmlProps": {
                "optionsLayout": "row",
                "labelPlacement": "end"
            },
            "validation": {
                "required": true
            },
            "options": [
                {
                    "value": "host",
                    "label": "Host"
                },
                {
                    "value": "uri",
                    "label": "Connection URI"
                }
            ]
        }
    }
]

RadioButton with description

[
    {
        "name": "connection_method",
        "meta": {
            "displayName": "Connection Method",
            "displayType": "radiobutton",
            "value": "host",
            "htmlProps": {
                "optionsLayout": "row",
                "labelPlacement": "end"
            },
            "validation": {
                "required": true
            },
            "description": "Select the connection method",
            "options": [
                {
                    "value": "host",
                    "label": "Host"
                },
                {
                    "value": "uri",
                    "label": "Connection URI"
                }
            ]
        }
    }
]

Schema​

props​

name​

meta object​

Common Validation Properties

Example JSON​

RadioButton with options​

RadioButton with default value​

RadioButton with description​