skills.rest
jiaiyan
jiaiyanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

n-switch

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
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-switch
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
jiaiyanjiaiyan
8

naive-ui-i18n

Configure Naive UI internationalization with NConfigProvider and createLocale for Vue 3 apps.

Community
Advanced
ApegurusApegurus
1

unchecked-return-values

Detect unchecked return values from low-level calls in Solidity contracts.

Community
Basic
spqwspqw

observable-framework-input-form

Combine multiple Observable Inputs components into a single compound input form.

Community
Basic
jiaiyanjiaiyan
8

n-checkbox

Provide reusable checkbox controls for Vue 3 forms with Naive UI.

Community
Advanced