Swap: Blazor swap component

Examples

Animation="SwapAnimation.Rotate" spins between the icons; @bind-Active keeps your field in sync.

Light mode

website/Examples/Actions/SwapRotateExample.razor Source

SwapAnimation.Flip turns the content over like a card.

Sync paused

website/Examples/Actions/SwapFlipExample.razor Source

On and Off take any markup; without an animation the switch is instant.

Online

Offline

website/Examples/Actions/SwapTextExample.razor Source

DaisyBlazor

Active bool
= false
Whether the swap is in the active (on) state.
Animation SwapAnimation
= SwapAnimation.None
Animation applied to the swap transition.
AriaLabel string
= null
Accessible name of the toggle, read by screen readers (the On/Off content is usually an icon).
Class string
= null
Extra CSS classes merged onto the swap label.
Style string
= null
Inline CSS styles applied to the swap label.

Name	Type	Default	Description
Active	bool	false	Whether the swap is in the active (on) state.
Animation	SwapAnimation	SwapAnimation.None	Animation applied to the swap transition.
AriaLabel	string	null	Accessible name of the toggle, read by screen readers (the On/Off content is usually an icon).
Class	string	null	Extra CSS classes merged onto the swap label.
Style	string	null	Inline CSS styles applied to the swap label.

Name	Type	Description
ActiveChanged	EventCallback<bool>	Raised when the active state changes.

Name	Type	Description
Off	RenderFragment	Content shown when the swap is inactive (unchecked).
On	RenderFragment	Content shown when the swap is active (checked).