n-radio

Create single-selection inputs using Naive UI radio components.

8|3|Updated Mar 13, 2026
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-radio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: n-radio
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-radio
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-radio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Providing a cohesive, accessible single-select input experience built from Naive UI radio components (n-radio, n-radio-group, n-radio-button) for consistent forms and UI.

Core Features & Use Cases

  • Supports basic single selection with n-radio
  • Groups with n-radio-group for coordinated selection
  • Button-style radios via n-radio-button for prominent options
  • Various sizes and disabled states for flexible layouts
  • Real-world scenarios include gender, preferences, settings, and dynamic options

Quick Start

Bind a v-model to n-radio-group and render n-radio options to enable a single-select input in your form.

Frequently Asked Questions about n-radio

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

FAQPage Schema
How do I create a single-select radio input in a Vue form using Naive UI?▼

To create a single-select radio input in Vue, bind a v-model to the n-radio-group component and render n-radio options inside it to enable mutually exclusive selection for your form.

What is the difference between n-radio and n-radio-button in Naive UI?▼

The n-radio component renders a standard single-selection option, whereas n-radio-button provides a button-style radio for prominent options within an n-radio-group for coordinated selection.

Can I disable individual radio options or manage sizes in Naive UI?▼

Yes, Naive UI radios support size and disabled properties for flexible layouts, allowing you to disable individual options or adjust dimensions within your n-radio-group.

How do I handle update events for a Naive UI radio group?▼

Naive UI radio components emit update:value on n-radio-group and update:checked on individual n-radio elements to synchronize the selected option with your Vue application state.

Does the Naive UI radio component support accessibility for labeled options?▼

Yes, the Naive UI radio component includes accessibility considerations for labeled options, ensuring that single-selection inputs like preferences or settings remain usable with assistive technologies.