Radio
The Radio component can be used in any form to provide a set of radio buttons.
Schema
[
{
"name": "select-framework",
"meta": {
"displayName": "Select your library",
"displayType": "radio",
"description": "a normal description for the group",
"value": "",
"readOnly": false,
"options": [
{
"label": "React",
"value": "react"
},
{
"label": "Vue",
"value": "vue"
},
{
"label": "Svelte",
"value": "svelte"
}
],
"htmlProps": {
"optionsLayout": "row",
"labelPlacement": "end"
},
"validation": {
"required": true
}
}
}
]
Example
Form Data:
{}value set to first option
[
{
"name": "select-framework",
"meta": {
"displayName": "Select your library",
"displayType": "radio",
"description": "a normal description for the group",
"value": "react",
"options": [
{
"label": "React",
"value": "react"
},
{
"label": "Vue",
"value": "vue"
},
{
"label": "Svelte",
"value": "svelte"
}
],
"validation": {
"required": true
}
}
}
]
Form Data:
{}required set to false
[
{
"name": "select-framework",
"meta": {
"displayName": "Select your library",
"displayType": "radio",
"description": "a normal description for the group",
"options": [
{
"label": "React",
"value": "react"
},
{
"label": "Vue",
"value": "vue"
},
{
"label": "Svelte",
"value": "svelte"
}
],
"htmlProps": {
"allowDynamic": true
},
"validation": {
"required": false
}
}
}
]
Form Data:
{}Field Properties
Properties used by this field (inside meta field in schema)
| Name | Description | Type |
|---|---|---|
name | The unique identifier for the radio control instance. | string |
displayName | A string that sets the display name of the radio control. | string |
displayType | A string indicating the type of control, which is "radio" in this case. | string |
description | A string providing additional information or instructions about the radio control. | string |
value | The initial value of the selected radio button. | any |
options | An array of objects representing the radio options. Each object should contain: | object[] |
label | The display label for the radio button (within options). | string |
value | The value of the radio button (within options). | any |
validation | An object for validation rules. | object |
required | A boolean indicating if the radio control is required (within validation). | boolean |
htmlProps | The htmlProps object to set properties for the underlying HTML radio control. | object |
readOnly | A readonly field is not editable and value cannot be changed | boolean |
htmlProps Properties
In addition to the basic properties, htmlProps allows further customization of the radio buttons' layout and label placement.
optionsLayout
The optionsLayout property defines how the radio buttons are laid out. It accepts the following values:
| Value | Description |
|---|---|
"row" | Aligns the radio buttons horizontally |
"column" | Aligns the radio buttons vertically (default) |
labelPlacement
The labelPlacement property controls where the label is positioned relative to the radio button. It accepts the following values:
| Value | Description |
|---|---|
"end" | Places the label to the right of the control (default) |
"start" | Places the label to the left of the control |
"top" | Places the label above the control |
"bottom" | Places the label below the control |
allowDynamic
The allowDynamic property allows for static and dynamic value selection