MoonUI

Switch

Free

Toggle switch with size and color variants, optional left/right icons, description text, and a built-in loading state.

Installation

Install via CLI

npx @moontra/moonui-cli add switch

Usage

Examples

Basic Switch

Simple on/off toggle

Sizes

Three built-in sizes via the size prop

Variants

Color variants applied to the checked state

With Icons

Icons and description text via the leftIcon and description props

Dark Mode
Sound effects

Loading

Built-in loading state with the loading prop (renders a spinner and disables the switch)

States

Different switch states

Settings Panel

Real-world settings panel example

System Settings

Receive app notifications

Protect your eyes

Connection