skills.rest
TechsioCZ
TechsioCZOFFICIAL
Explore all skills by this author →
GitHub

numeric-input-usage

Implement accessible NumericInput usage with locale and validation props in React.

2|Updated Dec 2, 2024
Search Tags:#react#validation#forms#ui-kit#accessible#zag.js#numeric-input
One-click install
npx skills add https://github.com/TechsioCZ/new-engine --skill numeric-input-usage
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: numeric-input-usage
Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/numeric-input-usage
Command: npx skills add https://github.com/TechsioCZ/new-engine --skill numeric-input-usage

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The NumericInput usage guide provides clear, accessible patterns for implementing a robust numeric input component within the UI kit, ensuring proper keyboard navigation, ARIA labeling, and locale-aware formatting.

Core Features & Use Cases

  • Core guidance on building accessible numeric inputs with the ui-kit wrapper, including min/max handling, locale considerations, and spin button behavior.
  • Use Cases include quantity selectors, currency-like inputs, and bounded numbers for forms across web apps.

Quick Start

Integrate NumericInput in a form to enable accessible number entry with proper locale, min/max, and spin button controls.

Frequently Asked Questions about numeric-input-usage

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

FAQPage Schema
How do I implement an accessible numeric input in React?▼

To implement an accessible numeric input in React, use the ui-kit NumericInput wrapper to ensure proper keyboard navigation, ARIA labeling, and locale-aware formatting for your forms.

What is the best way to add min and max validation to a numeric input?▼

The best way to add min and max validation is by configuring the bounded number props on the NumericInput component, which enforces spin button behavior and limits within your specified range.

Does the numeric input component support locale-aware formatting?▼

Yes, the numeric input component supports locale-aware formatting, allowing you to handle currency-like inputs and localized number displays across web applications.

How do I build a quantity selector with spin button controls?▼

Build a quantity selector by integrating the NumericInput component, which provides built-in spin button behavior and accessible controls for precise number entry in forms.

Why does my numeric input need ARIA labeling and keyboard navigation?▼

Your numeric input needs ARIA labeling and keyboard navigation to meet accessibility standards, ensuring screen readers can properly announce the control and users can operate it without a mouse.

Related Skills

Explore More Software Engineering Skills→
TechsioCZTechsioCZ
2

slider-usage

Implement Zag.js Slider for bounded numeric input in React apps.

Official
Intermediate
cas-bigdatalabcas-bigdatalab
541

read_file_and_multiply

Multiply numeric values in text files by a factor of 10.

Official
Basic
TechsioCZTechsioCZ
2

combobox-usage

Render accessible searchable Combobox selections in React forms with Zag.js.

Official
Intermediate
jiaiyanjiaiyan
8

n-input-number

Create configurable numeric input components with min, max, step, and formatting.

Community
Intermediate