Switch

Usage

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

<Switch.Root>
  <Switch.HiddenInput />
  <Switch.Control>
    <Switch.Thumb />
  </Switch.Control>
  <Switch.Label />
</Switch.Root>

:::info

If you prefer a closed component composition, check out the snippet below.

:::

Shortcuts

The Switch component also provides a set of shortcuts for common use cases.

SwitchControl

The Switch.Control renders the Switch.Thumb within it by default.

This works:

<Switch.Control>
  <Switch.Thumb />
</Switch.Control>

This might be more concise, if you don't need to customize the thumb:

<Switch.Control />

Examples

Sizes

Pass the size prop to the Switch.Root component to change the size of the switch component.

Variants

Pass the variant prop to the Switch.Root component to change the visual style of the switch.

Colors

Pass the colorPalette prop to the Switch.Root component to change the color scheme of the component.

Controlled

Use the checked and onCheckedChange prop to control the state of the switch.

Hook Form

Here's an example of integrating the switch with react-hook-form.

Disabled

Pass the disabled prop to the Switch.Root component to disable the switch.

Invalid

Pass the invalid prop to the Switch.Root component to indicate an error state for the switch.

Tooltip

Here's an example of how to compose a switch with a tooltip.

Track Indicator

Use the Switch.Indicator component to display different indicators based on the checked state.

Thumb Indicator

Use the Switch.ThumbIndicator component to add an icon to the switch thumb.

Closed Component

Here's how to setup the Switch for a closed component composition.

If you want to automatically add the closed component to your project, run the command:

npx @chakra-ui/cli snippet add switch

Here's how to use the it

<Switch>Activate Chakra</Switch>

Props

Root

Explorer

Explore the Switch component parts interactively. Click on parts in the sidebar to highlight them in the preview.