A clickable element that can be used to get a true or false value.

The Switch component is a very basic component that can be parametrized by its size, tone, shadow and other properties.

import { Checkbox } from '@rewind-ui/core';

function App() {
  return (
    <Switch label="Click me!" />


Import the Switch component using the following import statement.

import { Switch } from '@rewind-ui/core';


The available color values are: blue, red, green, yellow, purple, gray, dark and black.

  <Switch label="Blue" color="blue" checked={true} />
  <Switch label="Red" color="red" checked={true} />
  <Switch label="Green" color="green" checked={true} />
  <Switch label="Yellow" color="yellow" checked={true} />
  <Switch label="Purple" color="purple" checked={true} />
  <Switch label="Gray" color="gray" checked={true} />
  <Switch label="Dark" color="dark" checked={true} />
  <Switch label="Black" color="black" checked={true} />


Available size values are: sm, md, lg and xl.

  <Switch label="Small" size="sm" checked={true} />
  <Switch label="Medium" size="md" checked={true} />
  <Switch label="Large" size="lg" checked={true} />
  <Switch label="Extra large" size="xl" checked={true} />


Available radius values are: none, sm, md, lg and full.

  <Switch label="None" radius="none" checked={true} />
  <Switch label="Small" radius="sm" checked={true} />
  <Switch label="Medium" radius="md" checked={true} />
  <Switch label="Large" radius="lg" checked={true} />
  <Switch label="Full" radius="full" checked={true} />


Switch component supports disabled and error states. The error state is enabled automatically by passing an error message to the error prop.

Something went wrong...
  <Switch label="Disabled" disabled />
  <Switch label="Click me!" error="Something went wrong..." />


The description prop can be used to display a description below the checkbox.

This is a description
  <Switch label="Click me!" description="This is a description" />

Furthermore, a ReactNode can be passed to the description prop to display a more complex description that may contain multiple jsx elements.

This is a purple description
    label="Click me!"
    description={<span className="text-purple-500 bg-purple-50 p-1 rounded">This is a purple description</span>}

Similar styling can be achieved by using the descriptionClassName prop.

This is a pink description
    label="Click me!"
    descriptionClassName="text-pink-500 bg-pink-50 p-1 rounded"
    description="This is a pink description"


You can add a ring to the Switch by setting the withRing prop to true.

  <Switch label="Click me!" withRing={true} />
  <Switch label="Click me!" withRing={false} />

API Reference


colorSwitchColorSets the colordark
disabledbooleanDisables the checkboxfalse
descriptionstring or ReactNodeDescription contentundefined
descriptionClassNamestringDescription span element classesundefined
errorstring or ReactNodeError contentundefined
errorClassNamestringError span element classesundefined
labelstring or ReactNodeLabel contentundefined
labelClassNamestringLabel element classesundefined
radiusSwitchRadiusSets the border radiusfull
sizeSwitchSizeSets the checkbox sizemd
withRingbooleanShows a ring around the checkbox on active statetrue


onChange(value: boolean) => voidFires when the switch state is changed


type SwitchColor =
  | 'blue'
  | 'red'
  | 'green'
  | 'yellow'
  | 'purple'
  | 'gray'
  | 'dark'
  | 'black';
type SwitchRadius = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'full';
type SwitchSize = 'sm' | 'md' | 'lg' | 'xl';


The Switch component adheres to the WAI-ARIA Switch Pattern.