RadCN
Inputsreadycomponentready

Switch

A native checkbox-backed switch with explicit label wiring, state hooks, sizing, and tokenized thumb styling.

Importimport { Switch } from 'radcn/switch'
Preview

Live package example

Render the upstream Airplane Mode switch row with default unchecked state and native label activation.

Switch Demo

Render the upstream Airplane Mode switch row with default unchecked state and native label activation.

Preview
import { Label } from 'radcn/label'
import { Switch } from 'radcn/switch'

export function SwitchDemo() {
  return (
    <div class="flex items-center space-x-2" style="display:flex;align-items:center;gap:0.5rem;">
      <Switch id="airplane-mode" />
      <Label for="airplane-mode">Airplane Mode</Label>
    </div>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Switch } from 'radcn/switch'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • Switch renders a native checkbox input with role="switch" and keeps the input as the accessible control.
  • The named demo maps upstream id="airplane-mode" and Label htmlFor to RadCN id plus Label for, preserving the Airplane Mode accessible name.
  • The default demo is unchecked in server HTML and uses size="default" metadata on the wrapper and input.
  • Browser checkbox behavior owns pointer, keyboard, label activation, disabled, form submission, and reset behavior while enhanceSwitch mirrors public data-state metadata.

Customization

  • Wrapper, native input, and thumb expose public data-radcn-switch hooks and package classes.
  • The upstream flex items-center space-x-2 row layout maps to class plus explicit display, alignment, and 0.5rem gap style evidence.
  • className maps to class, and apps can customize id, name, checked state, value, required, disabled, size, classes, styles, and tokens.
  • Existing checked, disabled, form-submit-reset, size sm, and custom-token fixtures remain evidence for broader Switch modifiability.

Remix 3 Notes

  • use client, React component props, and React.ComponentProps<typeof SwitchPrimitive.Root> map to explicit Remix UI props and browser-owned checkbox state.
  • Radix SwitchPrimitive.Root maps to the RadCN switch wrapper plus native input; SwitchPrimitive.Thumb maps to data-radcn-switch-thumb.
  • Radix data-slot maps to public data-radcn-switch-wrapper, data-radcn-switch-input, and data-radcn-switch-thumb hooks.
  • size = "default" maps to RadCN size="default" plus data-size="default" metadata.
  • Tailwind peer, group, inline-flex, shrink, items-center, rounded, border, shadow, focus, disabled, size, checked/unchecked background, and thumb translation utilities map to package CSS, classes, style, CSS variables, and app-owned CSS.
  • Label htmlFor maps to RadCN Label for while preserving native label/input association.
  • Vendor source remains read-only evidence and is not imported by RadCN.