ToggleButtonGroup API

The API documentation of the ToggleButtonGroup React component. Learn more about the properties and the CSS customization points.

import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';

Props

Name	Type	Default	Description
children *	node		The content of the button.
classes	object		Useful to extend the style applied to components.
exclusive	bool	false	If `true`, only allow one of the child ToggleButton values to be selected.
onChange	func		Callback fired when the value changes. Signature: `function(event: object, value: object) => void` event: The event source of the callback value: of the selected buttons. When `exclusive` is true this is a single value; when false an array of selected values. If no value is selected and `exclusive` is true the value is null; when false an empty array.
selected	union: bool \| enum: 'auto'	'auto'	If `true`, render the group in a selected state. If `auto` (the default) render in a selected state if `value` is not empty.
value	any		The currently selected value within the group or an array of selected values when `exclusive` is false.

Any other properties supplied will be spread to the root element (native element).

You can override all the class names injected by Material-UI thanks to the classes property. This property accepts the following keys:

Name	Description
root	Styles applied to the root element.
selected	Styles applied to the root element if `selected={true}` or `selected="auto" and`value` set.

If using the overrides key of the theme, you need to use the following style sheet name: MuiToggleButtonGroup.