Switch

An animated toggle switch component for boolean settings. Built with Framer Motion for smooth spring-based animations. Supports labels, descriptions, color variants, and configurable label positioning.

Import

import { Switch } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<Switch
  checked={enabled}
  onChange={(e) => setEnabled(e.target.checked)}
/>

<Switch
  label="Email notifications"
  description="Receive weekly digest emails"
  checked={notifications}
  onChange={handleChange}
/>

<Switch
  label="Dark mode"
  variant="success"
  size="lg"
  labelPosition="left"
  checked={darkMode}
  onChange={handleChange}
/>

Props

Prop	Type	Default	Description
`label`	string	-	Label text displayed next to the switch.
`description`	string	-	Description text rendered below the label.
`labelPosition`	'left' \| 'right'	`'right'`	Position of the label relative to the switch.
`size`	'sm' \| 'md' \| 'lg'	`'md'`	Size of the switch track and thumb.
`variant`	'default' \| 'success' \| 'warning' \| 'error'	`'default'`	Color variant applied when the switch is checked.
`checked`	boolean	`false`	Controlled checked state of the switch.
`onChange`	(e: ChangeEvent<HTMLInputElement>) => void	-	Change event handler fired when the switch is toggled.
`disabled`	boolean	`false`	Whether the switch is disabled.
`className`	string	-	Additional CSS classes to apply to the switch track.

The component also accepts all standard HTML <input> attributes (except size).