The Switch component is used as an alternative for the checkbox component.

    SourceTheme source@chakra-ui/switch

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

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


import { Switch } from '@chakra-ui/react'


<FormControl display='flex' alignItems='center'>
<FormLabel htmlFor='email-alerts' mb='0'>
Enable email alerts?
<Switch id='email-alerts' />


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

<Stack align='center' direction='row'>
<Switch size='sm' />
<Switch size='md' />
<Switch size='lg' />

Switch background color#

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

<Stack direction='row'>
<Switch colorScheme='red' />
<Switch colorScheme='teal' size='lg' />

State depending behavior#

States like isDisabled have an impact on the usability of a Switch and on the styles, except for the isInvalid and the isRequired prop.

<FormControl as={SimpleGrid} columns={{ base: 2, lg: 4 }}>
<FormLabel htmlFor='isChecked'>isChecked:</FormLabel>
<Switch id='isChecked' isChecked />
<FormLabel htmlFor='isDisabled'>isDisabled:</FormLabel>
<Switch id='isDisabled' isDisabled defaultChecked />
<FormLabel htmlFor='isFocusable'>isFocusable:</FormLabel>
<Switch id='isFocusable' isFocusable isDisabled />
<FormLabel htmlFor='isInvalid'>isInvalid:</FormLabel>
<Switch id='isInvalid' isInvalid />
<FormLabel htmlFor='isReadOnly'>isReadOnly:</FormLabel>
<Switch id='isReadOnly' isReadOnly />
<FormLabel htmlFor='isRequired'>isRequired:</FormLabel>
<Switch id='isRequired' isRequired />
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel