Version: 3.0.0-next.36

Switch

The Switch component is an alternative to the Checkbox component. You can switch between enabled or disabled states.

Implements#

Examples#

Basic#

Sizes#

Background#

Props#

NameTypeDescriptionDefault
namestringThe input name of the Switch when used in a form.-
sizelg, md, smThe size (width and height) of the switch.md
isCheckedbooleanIf true, set the Switch to the checked state.-
defaultIsCheckedbooleanIf true, the checkbox will be initially checked.-
isDisabledbooleanIf true, set the disabled to the invalid state.-
isInvalidbooleanIf true, set the switch to the invalid state.-
onTrackColorstringThe track color of the Switch when on.-
offTrackColorstringThe track color of the Switch when off.-
onThumbColorstringThe thumb color of the Switch when on.-
offThumbColorstringThe thumb color of the Switch when off.-
onTogglefunctionFunction called when the state of the Switch changes.-
accessibilityLabelstringAccessibilty label for component.-
accessibilityHintstringAccessibilty hint for component