Rafi Wirana

Design Engineer

Preview

Work in Progress: This installation guide is still being refined. Some documentation may be incomplete.

Back to philosophy

Copy link

WARP Switch

A toggle switch inspired by Cloudflare WARP with stretching micro-interactions that respond to press gestures.

Installation

✨ No external dependencies required

Component location

components/craft/WarpSwitch/index.tsx

Usage

Basic example

import { WarpSwitch } from '@/components/craft/WarpSwitch';
import { useState } from 'react';

export function Example() {
  const [isEnabled, setIsEnabled] = useState(false);

  return (
    <div className="flex items-center gap-3">
      <WarpSwitch
        checked={isEnabled}
        onCheckedChange={setIsEnabled}
        aria-label="Enable feature"
      />
      <span>Feature {isEnabled ? 'enabled' : 'disabled'}</span>
    </div>
  );
}

More Examples

Basic Usage

Uncontrolled switch with default state

<WarpSwitch
  defaultChecked={false}
  onCheckedChange={(checked) => console.log(checked)}
  aria-label="Toggle setting"
/>

Controlled Switch

Control the switch state externally

const [enabled, setEnabled] = useState(true);

<WarpSwitch
  checked={enabled}
  onCheckedChange={setEnabled}
  aria-label="Enable notifications"
/>

Disabled State

Prevent interaction with disabled prop

<WarpSwitch
  checked={true}
  disabled={true}
  aria-label="Premium feature"
/>

With Label

Associate with a clickable label

<div className="flex items-center gap-3">
  <WarpSwitch
    id="notifications"
    checked={enabled}
    onCheckedChange={setEnabled}
  />
  <label htmlFor="notifications" className="cursor-pointer">
    Enable notifications
  </label>
</div>

Custom Styling

Customize appearance with class names

<WarpSwitch
  checked={enabled}
  onCheckedChange={setEnabled}
  className="scale-125"
  thumbClassName="bg-blue-500"
  trackClassName="bg-blue-100"
/>

Form Integration

Use with forms via the name prop

<form>
  <WarpSwitch
    name="agreeToTerms"
    defaultChecked={false}
    aria-label="I agree to terms"
  />
</form>

API Reference

Prop	Type	Default	Description
`checked`	`boolean`	—	Controlled checked state. When provided, component operates in controlled mode.
`defaultChecked`	`boolean`	—	Default checked state for uncontrolled component
`onChange`	`(checked: boolean) => void`	—	Callback fired when the checked state changes (alias for onCheckedChange)
`onCheckedChange`	`(checked: boolean) => void`	—	Callback fired when the checked state changes
`disabled`	`boolean`	`false`	Whether the switch is disabled
`name`	`string`	—	Name attribute for form integration
`thumbClassName`	`string`	—	Additional CSS classes for the thumb (sliding circle)
`trackClassName`	`string`	—	Additional CSS classes for the track (background container)
`className`	`string`	—	Additional CSS classes for the root button element
`aria-label`	`string`	—	Accessible label for screen readers