Skip to main content

Toggle Button Group

The Toggle Button Group component allows the user to select one option from a set.

The Toggle Button Group component is used independently or as a form component. To use it as a form component, place it within a Form Block.

Properties

NameTypeDefaultDescription
labelnodeSpecifies a label for the component.
valueanySpecifies a value for the component.
classesobjectOverrides or extends the classes applied to the component.
exclusiveboolfalseIf true, only allow one of the toggle buttons to be selected.
disabledboolfalseIf true, the toggle button group is disabled.
toggleButtonItemscomponentSpecifies a list of toggle buttons within the toggle button group.

Style Attributes

NameTypeDefaultDescription
orientationhorizontal
vertical
string
horizontalSpecifies the orientation of the toggle button group.
sizesmall
medium
large
string
mediumDefines the size of the component.
colorstandard
primary
secondary
error
info
success
warning
string
standardDefines the color of the component.
fullWidthboolfalseIf true, the toggle button group takes up the full width of its container.
sxarraySpecifies custom CSS styles for the toggle button group.

Subcomponents

The Toggle Button Group component has one subcomponent, a Toggle Button component, used to create a list of Toggle Button Items.

Toggle Button

A Toggle Button is a component that acts as a single input control and is part of a set within a Toggle Button Group. It is possible to select multiple toggle buttons unless the exclusive property is enabled for the Toggle Button Group.

The toggle button has two states, On and Off.

For further details, see the Toggle Button component.

Properties

NameTypeDefaultDescription
textstringThe text label of the component (read only in the toggle button group props) .

For more detail on the Toggle Button Group component, see the MUI developer docs.

on this page
Was this article useful?
89% of our users said this content was useful.