Switch

Turns an immediately applied setting on or off.

Preview

Example code

Product announcements

Receive occasional release notes by email.

Playground

Schemescheme

Applies a semantic color when checked.

On by defaultdefaultChecked

Sets the initial uncontrolled state.

Disableddisabled

Prevents the setting from being changed.

Usage

tsx

import { Label } from "earthling-ui/label";
import { Switch } from "earthling-ui/switch";

export function Example() {
  return (
    <>
      <Switch id="announcements" defaultChecked />
      <Label htmlFor="announcements">Product announcements</Label>
    </>
  );
}

Label the setting itself rather than describing the current on or off state.
Use a checkbox when users should review several selections before submitting.
The thumb motion respects reduced-motion preferences.

Installation

Start with the project setup for React and Tailwind CSS 4. Both paths use the same component and theme.

Import package

Own the source

bash

npm install earthling-ui

Use the component import shown above. Package updates keep the implementation current.

API reference

Declarations from the current library build, including inherited primitive props. Playground controls above show selected options; they are not the complete API.

tsx

// Generated by dts-bundle-generator v9.5.1

import * as SwitchPrimitives from '@radix-ui/react-switch';
import { VariantProps } from 'class-variance-authority';
import { ComponentPropsWithoutRef } from 'react';

declare const switchVariants: (props?: ({
	material?: "paper" | null | undefined;
	scheme?: "default" | "primary" | "secondary" | "tertiary" | "neutral" | "muted" | "good" | "caution" | "bad" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
export interface SwitchProps extends ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, VariantProps<typeof switchVariants> {
}
export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;

export {};

Runtime dependencies: @radix-ui/react-switch, class-variance-authority, cnfast.

Source

Use the eject command to copy this implementation with its required helpers and project-specific imports.

View Switch implementation

tsx

"use client";

import {
  type ComponentPropsWithoutRef,
  type ComponentRef,
  forwardRef,
} from "react";
import * as SwitchPrimitives from "@radix-ui/react-switch";

import { cn } from "@/utils/cn";
import { schemes } from "@/utils/variants";
import { cva, type VariantProps } from "class-variance-authority";

const switchVariants = cva(
  "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-outline focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-bad aria-invalid:ring-bad/30 ",
  {
    variants: {
      material: { paper: "bg-muted data-[state=checked]:bg-(--scheme-tint)" },
      scheme: schemes,
    },
    defaultVariants: { material: "paper", scheme: "default" },
  },
);

export interface SwitchProps
  extends
    ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>,
    VariantProps<typeof switchVariants> {}

const Switch = forwardRef<
  ComponentRef<typeof SwitchPrimitives.Root>,
  SwitchProps
>(({ className, material, scheme, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(switchVariants({ material, scheme }), className)}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb className="pointer-events-none block size-5 rounded-full bg-muted-foreground shadow-sm transition-transform duration-150 ease-out motion-reduce:transition-none data-[state=checked]:bg-(--scheme-foreground) data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 rtl:data-[state=checked]:-translate-x-5" />
  </SwitchPrimitives.Root>
));
Switch.displayName = SwitchPrimitives.Root.displayName;

export { Switch };