Swap

Swap is used to toggle between two states with an optional animation effect.

Installation

npx jsx-daisyui add swap

Default

swap-default

OFF

Rotate effect

swap-rotate

Flip effect

swap-flip

😄

😑

Text toggle

swap-text

Active

Inactive

Subscribed

Unsubscribed

Controlled

swap-controlled

🔊

🔇

Sound: off

Props

SwapRoot

Prop	Type	Default	Description
`effect`	`'rotate' \| 'flip'`	-	The animation effect when swapping states.
`active`	`boolean`	-	Forces the active state regardless of internal checked state.
`checked`	`boolean`	-	The controlled checked state.
`defaultChecked`	`boolean`	-	The default checked state when uncontrolled.
`onChange`	`(checked: boolean) => void`	-	Callback when the swap state changes.