ui / forms

Switch

A labeled native checkbox exposed as an accessible switch.

PREVIEW READY

LIVE PREVIEWDARK / LIGHT COMPATIBLE

PROJECT NAMEENVIRONMENT

Include motion recipesAutomatic themeRespect the stored preference

INSTALL / SOURCE REGISTRY

Add Switch to your project

The command adds the component source and its DesignOS base dependency.

$pnpm dlx shadcn@latest add https://designos.h4rithd.com/r/switch.json

registry/default/ui/switch.tsx

import * as React from "react"
import { clsx as cn } from "clsx"
import "@/components/designos/designos.css"

export const Switch = React.forwardRef<HTMLInputElement, Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & { label: React.ReactNode }>(
  ({ label, className, ...props }, ref) => (
    <label className={cn("dos-switch", className)}>
      <input ref={ref} type="checkbox" role="switch" {...props} />
      <span className="dos-switch__track" aria-hidden="true"><span className="dos-switch__thumb" /></span>
      <span>{label}</span>
    </label>
  ),
)
Switch.displayName = "Switch"

Component contract

Source-owned after installation
Dark and light theme variables
Keyboard and visible-focus behavior
Reduced-motion fallback
Responsive from 320px upward
IBM Plex Sans + JetBrains Mono hierarchy