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.


defaultValuenumber | number[]The key(s) of the initially selected value(s), only when it is uncontrolled.-
valuenumber | 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.-
labelstringText to be placed above the component.-
helperTextstringHelper text to be placed above the component.-
{ label?: string; icon: string | (React.ReactNode & React.SVGProps <SVGSVGElement>); value: string; title?: string; }[]An array of objects representing the selectable options. Each object has the following properties:
  • label: String with the option display value.
  • icon: Material Symbol name or SVG element used as the icon of an option.
  • value: Number with the option inner value.
  • title: Text representing advisory information related to an option. Under the hood, it also serves as an accessible label for the icon.
disabledbooleanIf true, the component will be disabled.false
multiplebooleanIf 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.false
onChange(optionIndex: number | number[]) => voidThis 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-
margin'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | MarginSize of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.-
tabIndexnumberValue of the tabindex attribute.0