Components
Toggle buttons

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

PropertyTypeDescription
componentstring
= "buttons-toggle-group"
namestringThe name of the field and the key of the JSON
labelstring | i18nLabel of the field
hintstring | i18nHelp text for the field (generally shown below the input box)
optionsarrayArray of object (with keys: "value" and "label") to define the buttons
showImageOptionsbooleanShow image field for Select options to be displayed in the drop-down
multiplebooleanAllow to select multiple values
disabledbooleanDisables and greys out the field
readOnlybooleanPut the field in read only mode
hiddenbooleanHides the field from the form
fullWidthbooleanSet the width of the container field to 100%
justifyContentstringValues: "center", "flex-start", "flex-end", "space-between", "space-around".
Pick up a framework to show specific properties
React Suite