Switch

A toggle control that allows users to turn an option on or off, similar to a checkbox.

Storybook

Radix UI Docs

Source

Automatic Installation

This method is still working on progress, please use manual installation for now.

Manual Installation

Install dependencies

npm install radix-ui

Copy the code

components/switch/switch.tsx

import { Switch as SwitchPrimitive } from 'radix-ui'
import * as React from 'react'
import { type SwitchStyles, switchStyles } from './switch.css'
 
interface SwitchProps
  extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, 'asChild'>,
    SwitchStyles {}
 
const Switch = React.forwardRef<React.ComponentRef<typeof SwitchPrimitive.Root>, SwitchProps>(
  ({ className, size, ...props }: SwitchProps, forwardedRef) => {
    const styles = switchStyles({ size })
    return (
      <SwitchPrimitive.Root ref={forwardedRef} className={styles.root({ className })} {...props}>
        <SwitchPrimitive.Thumb className={styles.thumb()} />
      </SwitchPrimitive.Root>
    )
  }
)
 
Switch.displayName = 'Switch'
 
export { Switch }

Usage

Imports

import { Switch } from '#/components/switch'

Example

Browse the Storybook for more examples.

Anatomy

<Switch>
  <SwitchThumb />
</Switch>

On this page