Skip to main content

Switch

The Switch component toggles the state of a single setting on or off.

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

Properties

NameTypeDefaultDescription
namestringSpecifies the name of the component (form component only).
labelnodeSpecifies a label for the component.
valueanySpecifies a value for the component.
checkedboolfalseIf true, the switch is checked.
requiredboolfalseIndicates if the switch must be set.
disabledboolfalseIf true, the switch is disabled.
autofocusboolfalseIf true, autofocus is enabled.

Style Attributes

NameTypeDefaultDescription
colordefault
primary
secondary
error
info
success
warning
string
primaryDefines the color of the component.
sizesmall
medium
string
mediumDefines the size of the component.
labelPlacementtop
bottom
start
end
string
endSpecifies the location of the switch label.
disableRippleboolfalseBy default, the switch component has a ripple effect triggered when the switch state is modified. To disable this effect, set "Disable Ripple" on.

Subcomponents

The Switch component has a subcomponent that allows an icon to replace the normal thumb on the switch.

Icon

Checked Icon - specifies an icon to use when the switch is set.

Unchecked Icon - specifies an icon to use when the switch is not set.

For further details, see the Icon component.

Properties

NameTypeDefaultDescription
colorinherit
primary
secondary
action
disabled
error
string
inheritDefines the color of the icon.
sizeinherit
small
medium
large
string
smallDefines the size of the icon.
viewBox0 0 24 24Defines the size of the view box that displays the icon.
fillhex #ffffff
rgb 5,5,5
The fill color of the icon.
strokehex #ffffff
rgb 5,5,5
The stroke color of the icon.

For more detail on the Switch component, see the MUI developer docs.

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