Switch

A control that allows the user to toggle between checked and not checked.

Radix UI

Switch components are used to allow users to toggle between two states, such as on and off.

 
import Switch from "@tailus-ui/Switch";
import Label from "@tailus-ui/Label";
import Aligner from "@tailus-ui/Aligner";
import { Caption } from "@tailus-ui/typography";

export const Overview = () => (
    <Aligner fromRight className="max-w-md">
        <Label htmlFor="airplane-mode">
            Airplane mode
        </Label>
        <Switch.Root className="mt-1" id="airplane-mode">
            <Switch.Thumb />
        </Switch.Root>
        <Caption as="p" size="base">Switch components are used to allow users to toggle between two states, such as on and off.</Caption>
    </Aligner>
)

Installation

Install the primitive and Copy-Paste the component code in a .tsx file.

npm install @radix-ui/react-switch
import * as Switch from "@radix-ui/react-switch";
import React, { useContext } from "react";
import {switchTheme, fancySwitch, type SwitchProps} from "@tailus/themer";

export interface SwitchVariantsProps extends SwitchProps {
  fancy?: boolean;
}
const SwitchContext = React.createContext<SwitchVariantsProps>({ intent: "primary", fancy: false})


const SwitchRoot = React.forwardRef<
  React.ElementRef<typeof Switch.Root>,
  React.ComponentPropsWithoutRef<typeof Switch.Root> & SwitchVariantsProps
  >(({ className, intent="primary", fancy=false, ...props }, forwardedRef) => {
    const { root } = fancy ? fancySwitch({intent}) : switchTheme({intent});
    return (
      <SwitchContext.Provider value={{ intent }}>
        <Switch.Root className={root({intent, className })} {...props} ref={forwardedRef} />
      </SwitchContext.Provider>
    )
  });

const SwitchThumb = React.forwardRef<
  React.ElementRef<typeof Switch.Thumb>,
  React.ComponentPropsWithoutRef<typeof Switch.Thumb> & SwitchProps
  >(({ className, ...props }, forwardedRef) => {
    const { intent } = useContext(SwitchContext)
    const { thumb } = switchTheme({ intent });
    return (
      <Switch.Thumb className={thumb({intent, className })} {...props} ref={forwardedRef} />
    )
  });

export {
  SwitchRoot,
  SwitchThumb,
};

export default {
  Root: SwitchRoot,
  Thumb: SwitchThumb,
}

Add Aligner component

Useful for aligning Checkbox, RadioGroup, and Switch components with their associated Label and Caption

import React from "react"
import { aligner, type AlignerProps as AlignerVariants } from "@tailus/themer"

export interface AlignerProps extends React.HTMLAttributes<HTMLDivElement>, AlignerVariants {}

export const Aligner = React.forwardRef<HTMLDivElement, AlignerProps>(
    ({className, children, fromRight, ...props }, forwardedRef) => {
        return (
            <div
                className={aligner({ fromRight, className})}
                ref={forwardedRef}
                children={children}
                {...props}
            />
        )
    })

export default Aligner;

Usage

Import all the parts and build your Switch.

import Switch from "@tailus-ui/Switch";
import Label from "@tailus-ui/Label";
import Aligner from "@tailus-ui/Aligner";
import { Caption } from "@tailus-ui/typography";
const MyComponent = () => (
    <Aligner fromRight className="max-w-md">
        <Label htmlFor="airplane-mode">
            Airplane mode
        </Label>
        <Switch.Root className="mt-1" id="airplane-mode">
            <Switch.Thumb />
        </Switch.Root>
        <Caption as="p" size="base">Switch components are used to allow users to toggle between two states, such as on and off.</Caption>
    </Aligner>
)

Reference

Root

The Radio Group <Root /> has the following additional props.

Prop
Type
Default
intent
enum
primary
fancy
boolean
false

Aligner

The Aligner component has the following props.

Prop
Type
Default
fromRight
boolean
false

Examples