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

n-checkbox

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

8|3|Updated Mar 13, 2026
Search Tags:#vue3#checkbox#naive-ui#grid-layout#form-controls#checkbox-group#indeterminate
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-checkbox
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: n-checkbox
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-checkbox
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-checkbox

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The n-checkbox component simplifies capturing binary selections and multi-option choices in forms, providing indeterminate states and flexible value mappings for real-world data.

Core Features & Use Cases

  • Single and grouped selections: Use a standalone checkbox for boolean flags or combine with n-checkbox-group for multiple options.
  • Indeterminate states and grid layouts: Supports indeterminate state for "select all" behavior and can be laid out in grids for compact forms.
  • Custom values and events: Supports checked-value / unchecked-value mappings, and emits update:checked or update:value events to synchronize with your data models.
  • Real-world scenarios: Form checklists, surveys with multiple selections, and grid-based option matrices.

Quick Start

Add an n-checkbox for a single boolean choice, or use n-checkbox-group to manage multiple options with optional indeterminate states and grid layouts.

Frequently Asked Questions about n-checkbox

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

FAQPage Schema
How do I manage grouped checkboxes with an indeterminate state in Vue 3?▼

Grouped checkboxes with an indeterminate state in Vue 3 are managed using n-checkbox-group to handle multiple options and support select-all behaviors. This approach works within grids for compact forms and multi-select surveys.

How do I map custom checked and unchecked values for a Vue 3 form checkbox?▼

Custom checkbox values are mapped in Vue 3 using checked-value and unchecked-value properties. This allows boolean selections to sync with real-world data models by emitting specific values through update:checked events.

Does Naive UI support setting min and max selection limits on checkbox groups?▼

Naive UI supports setting min and max selection limits on checkbox groups. This constrains multi-option choices within forms, ensuring users select only the allowed number of items.

How do I implement focus and blur methods on a Vue 3 checkbox control?▼

Focus and blur methods are implemented on a Vue 3 checkbox control by directly calling the exposed component methods. This enables precise programmatic control over user interaction states within complex forms.

What is the best way to lay out multiple checkboxes in a grid layout in Vue 3?▼

The best way to lay out multiple checkboxes in a grid layout in Vue 3 is combining n-checkbox-group with grid-based interfaces. This creates compact option matrices for surveys and checklists.

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
jiaiyanjiaiyan
8

n-radio

Create single-selection inputs using Naive UI radio components.

Community
Intermediate
jiaiyanjiaiyan
8

n-layout

Compose Naive UI layout components for scalable page structures.

Community
Advanced
jiaiyanjiaiyan
21

el-checkbox

Manage multi-option selection and group state in Vue forms.

Community
Intermediate