Switch

The Switch component is a toggle input that allows users to switch between two states.

import { Switch, SwitchParts } from '@cerberus/react'

Usage

import { Switch } from '@cerberus/react'
import { Box } from 'styled-system/jsx'

function BasicDemo() {
  return (
    <Box w="1/2">
      <Switch>Receive in app notifications</Switch>
    </Box>
  )
}

With Field

To use the Switch within a form, wrap it with the Field component.

import { Switch, Field } from '@cerberus/react'
import { Box } from 'styled-system/jsx'

function WithFieldDemo() {
  return (
    <Box w="1/2">
      <Field label="This is the field label" required>
        <Switch>Receive in app notifications</Switch>
      </Field>
    </Box>
  )
}

Sizes

import { Switch } from '@cerberus/react'
import { Box, VStack } from 'styled-system/jsx'

function SizesDemo() {
  return (
    <Box w="1/2">
      <VStack alignItems="flex-start" gap="lg">
        <Switch size="sm">Small size (default)</Switch>
        <Switch size="lg">Large size</Switch>
      </VStack>
    </Box>
  )
}

Primitives

You can utilize the primitive components or the css prop to customize the checkbox.

Component	Description
SwitchRoot	The context provider for the switch parts
SwitchLabel	The label of the switch
SwitchControl	The visual input of the switch
SwitchThumb	The thumb of the switch state
SwitchHiddenInput	The native input for the switch

import { SwitchParts } from '@cerberus/react'
import { Box } from 'styled-system/jsx'

function CustomDemo() {
  return (
    <Box w="1/2">
      <SwitchParts.Root>
        <SwitchParts.Label
          css={{
            textTransform: 'uppercase',
          }}
        >
          Receive in app notifications
        </SwitchParts.Label>
        <SwitchParts.Control
          css={{
            rounded: 'sm',
            transform: 'skewX(-10deg)',
            _checked: {
              bgColor: 'danger.surface.initial',
            },
          }}
        >
          <SwitchParts.Thumb
            css={{
              rounded: 'sm',
            }}
          />
        </SwitchParts.Control>

        <SwitchParts.HiddenInput />
      </SwitchParts.Root>
    </Box>
  )
}

API

Props

The Switch component is an abstraction of the primitives and accepts the following props:

Name	Default	Description
size	`sm`	This size of the Switch.

The Switch component also accepts all the props of the SwitchRoot primitive props

Parts

The SwitchParts API is an Object containing the full family of components.

Note

It is best to only use the SwitchParts if you are building a custom solution. Importing Object based components will ship every property it includes into your bundle, regardless if you use it or not.

Name	Description
Root	The `SwitchRoot` component which is the Provider for the family.
Label	The `SwitchLabel` component which displays the label.
Control	The `SwitchControl` component which is the visual field.
Thumb	The `SwitchThumb` component which displays the thumb of the switch.
HiddenInput	The `SwitchHiddenInput` component which displays the native input.

On this page