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

Fluid Switch

A switch that flows between states with a fluid motion, inspired by natural movements in nature.

Installation

✨ No external dependencies required

Component location

components/craft/FluidSwitch/index.tsx

Usage

Basic example

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

export function Example() {
  const [isEnabled, setIsEnabled] = useState(false);
  
  return (
    <FluidSwitch 
      checked={isEnabled}
      onChange={setIsEnabled}
      aria-label="Toggle feature"
    />
  );
}

More Examples

Controlled Switch

Controlled component with external state management

const [isOn, setIsOn] = useState(true);

<FluidSwitch 
  checked={isOn}
  onChange={setIsOn}
  aria-label="Power toggle"
/>

Uncontrolled Switch

Uncontrolled switch with default value

<FluidSwitch 
  defaultChecked={false}
  onChange={(checked) => console.log('Changed to:', checked)}
  aria-label="Setting toggle"
/>

Disabled State

Switch in disabled state

<FluidSwitch 
  checked={true}
  disabled
  aria-label="Disabled toggle"
/>

Custom Styling

Customize track and thumb appearance

<FluidSwitch 
  checked={isOn}
  onChange={setIsOn}
  trackClassName="bg-green-500 dark:bg-green-600"
  thumbClassName="bg-white shadow-xl"
  aria-label="Custom styled toggle"
/>

With Form

Use within forms with name attribute

<form onSubmit={handleSubmit}>
  <FluidSwitch 
    name="notifications"
    checked={settings.notifications}
    onChange={(checked) => setSettings({ ...settings, notifications: checked })}
    aria-label="Enable notifications"
  />
</form>

API Reference

Prop	Type	Default	Description
`checked`	`boolean`	—	Controlled checked state of the switch
`defaultChecked`	`boolean`	`false`	Default checked state for uncontrolled switch
`onChange`	`(checked: boolean) => void`	—	Callback fired when the switch state changes
`onCheckedChange`	`(checked: boolean) => void`	—	Alternative callback for state changes (alias for onChange)
`disabled`	`boolean`	`false`	Disable the switch interaction
`name`	`string`	—	Name attribute for form submission
`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 element
`aria-label`	`string`	—	Accessible label for screen readers
`aria-labelledby`	`string`	—	ID of element that labels the switch