Switch

This component requires the FyskProvider. See Quick Start →

Preview

Switch

TypeScript

bash

1npx shadcn@latest add https://fysk.dev/r/switch.json

tsx

1import { Switch } from "@/components/ui"
2
3<Switch />

Standard switch with a label.

Component

TypeScript

Airplane Mode

Explore different shapes like square or line across multiple sizes.

Aesthetic Variants: Supports classic rounded, modern square, glassmorphism, and a redesigned minimalistline variant.
Status Integration: Built-in support for loading, success, and error states with animated icons and themed tracks.
Consistent Scaling: Perfectly tuned sizes from xs to xl that align with the rest of the Fysk library.
Motion Feedback: Uses Framer Motion for layout transitions and icon-popping feedback during state changes.
Accessible: Built on Radix Switch for proper ARIA roles and keyboard interaction.

Prop	Type	Default	Description
`variant`	`"normal" \| "square" \| "line" \| "glass"`	`"normal"`	The visual shape/style of the switch.
`size`	`"default" \| "xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"default"`	The size of the switch.
`state`	`"idle" \| "loading" \| "success" \| "error"`	`"idle"`	The current interaction state.

Accepts all standard props from Radix UI Switch.