n-switch

Name: n-switch
Availability: InStock
Author: jiaiyan

Toggle binary UI states in Naive UI apps with configurable switch options.

8|3|Updated Mar 13, 2026

Search Tags:#customization #component #vue3 #loading #switch #naive-ui #binary-toggle

Ready to run

npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-switch

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: n-switch
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-switch
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-switch

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Toggle binary states in Naive UI applications with a configurable switch that supports custom values, loading indicators, and multiple sizes.

Core Features & Use Cases

Binary on/off toggles with optional loading indicators and support for custom checked/unchecked values.
Size variants (small, medium, large) and optional content labels or icons for clarity.
Flexible styling via rail-style and slots for checked/unchecked content or icons.

Quick Start

Add a basic switch to a UI and bind it to a reactive boolean.

Frequently Asked Questions about n-switch

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I toggle binary state in Vue 3 with a Naive UI switch?▼

To toggle binary state in a Naive UI switch within Vue 3, bind the component to a reactive boolean and configure custom checked-value and unchecked-value properties for immediate on/off feedback. It supports disabled, loading, and size variants.

Can I use custom values for an on/off toggle in Naive UI?▼

Yes, you can use custom values for an on/off toggle in Naive UI by defining the checked-value and unchecked-value properties. This allows the switch component to emit specific non-boolean data when toggled in forms or settings panels.

How do I add a loading indicator to a Vue 3 switch component?▼

You add a loading indicator to a Vue 3 switch component by enabling the loading state property. This displays a spinner inside the rail, providing immediate visual feedback during asynchronous operations in dashboards or settings.

Does Naive UI support different sizes for binary toggle switches?▼

Naive UI supports different sizes for binary toggle switches, including small, medium, and large variants. You can configure the size property to ensure the component visually matches your dashboard or settings panel layout.

How do I customize the rail style of a Naive UI switch?▼

You customize the rail style of a Naive UI switch by applying the rail-style property for flexible styling. Additionally, you can use slots to inject custom checked and unchecked content or icons for enhanced visual clarity.

What is the best way to handle immediate on/off feedback in Vue 3 dashboards?▼

The best way to handle immediate on/off feedback in Vue 3 dashboards is using a configurable binary switch. It supports custom values, loading indicators, and size options, ensuring responsive state updates within user interfaces.