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"
}

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".
className	string	CSS class name to assign to the field container
Pick up a framework to show specific properties Select framework