Toggle Group


Toggle buttons can be used to put together related options that share a common attribute modification. It allows the user to switch from one selected option to another in the same control, having one option selected at a time. Also, there can be another variation that allows selecting multiple options from the current toggle group.


label: stringText to be placed above the component.
helperText: stringHelper text to be placed above the component.
defaultValue: number | number[]The key(s) of the initially selected value(s), only when it is uncontrolled.
value: number | number[]The key(s) of the selected value(s). If the toggle group component doesn't allow multiple selection, it must be one unique value. If the component allows multiple selection, value must be an array. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
onChange: functionThis function will be called every time the selection changes. The number with the key of the selected value will be passed as a parameter to this function. If multiple selection is allowed, an array of keys will be passed
disabled: booleanfalseIf true, the component will be disabled.
multiple: booleanfalseIf true, the toggle group will support multiple selection. In that case, value must be an array of numbers with the keys of the selected values.
options: object[]An array of objects representing the selectable options. Each object has the following properties:
  • value: Number with the option inner value.
  • label: String with the option display value.
  • icon: Element or path used as the icon of an option.
margin: string | objectSize of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
tabIndex: number0Value of the tabindex.