Toggle Buttons
The Toggle Buttons buttons-toggle-group
field is multi toggle buttons, can select one or a multiple values (array),
useful - for example - to create feedback fields
Example
{
"component": "buttons-toggle-group",
"label": "My feedback",
"name": "feedback",
"options": [
{
"value": "0",
"label": "0"
},
{
"value": "1",
"label": "1"
},
{
"value": "2",
"label": "2"
},
{
"value": "3",
"label": "3"
},
{
"value": "4",
"label": "4"
},
{
"value": "5",
"label": "5"
},
{
"value": "6",
"label": "6"
},
{
"value": "7",
"label": "7"
},
{
"value": "8",
"label": "8"
},
{
"value": "9",
"label": "9"
},
{
"value": "10",
"label": "10"
}
],
"hint": "Select one value 1 - 10"
}
Loading...
Reference
Property | Type | Description |
---|---|---|
component | string | = "buttons-toggle-group" |
name | string | The name of the field and the key of the JSON |
label | string | i18n | Label of the field |
hint | string | i18n | Help text for the field (generally shown below the input box) |
options | array | Array of object (with keys: "value" and "label") to define the buttons |
showImageOptions | boolean | Show image field for Select options to be displayed in the drop-down |
multiple | boolean | Allow to select multiple values |
disabled | boolean | Disables and greys out the field |
readOnly | boolean | Put the field in read only mode |
hidden | boolean | Hides the field from the form |
fullWidth | boolean | Set the width of the container field to 100% |
justifyContent | string | Values: "center", "flex-start", "flex-end", "space-between", "space-around". |
Pick up a framework to show specific properties |