Switch

The Switch component is used as an alternative for the Checkbox component, switch between enabled or disabled states.

Switch must always be accompanied by a label, and follows the same keyboard workflow as a checkbox.

Import#

Usage#

Editable Example

Sizes#

Pass the size prop to change the size of the switch.

Editable Example

Switch background color#

You can change the checked background color of the switch by passing the color prop.

Editable Example

Props#

NameTypeDefaultDescription
sizesm, md, lgThe size of the switch.
colorstringThe background color of the switch when checked.
namestringThe input name of the switch when used in a form.
valuestring, booleanThe value of the switch.
childrenReact.ReactNodeThe children of the switch.
aria-labelstringThe aria-label of the switch for accessibility.
aria-labelledbystringThe aria-labelledby of the switch for accessibility.
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.

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2019 Segun Adebayo