# syncfusion-react-inputs

A skill covering Syncfusion input components for React: file uploads, numeric fields, OTP, signatures and sliders. Useful when a form is built on ej2-react-inputs.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 672 installs · ★ 3
- Author: Syncfusion Inc
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-inputs/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/syncfusion-react-inputs

## What it does

The skill walks through wiring up input components from `@syncfusion/ej2-react-inputs`: `UploaderComponent`, `NumericTextBox`, `TextBox`, `TextArea`, `CheckBox`, OTP Input, Signature, RangeSlider, ColorPicker, MaskedTextBox and Rating. Reference files are split by topic — package setup and license registration, async and chunked uploads, validation, templates, form integration, localization, accessibility, plus the full list of properties, methods and events.

The uploader gets the most room. It covers `asyncSettings` with `saveUrl` and `removeUrl`, `autoUpload`, `sequentialUpload`, `directoryUpload`, pausing and resuming chunks, retries via `retryCount` and `retryAfterDelay`, extension and size limits. Ready-made recipes include previewing an image before it goes out, a confirmation dialog before removal, opening the file browser from an outside button, and JWT authentication. On that last one the skill is blunt: keep tokens out of the code, pull them from a secure session store at runtime, and never log request headers or token values.

The skill also reins in the agent. It must ask before installing, running anything or creating files, and it will not install the package itself — it asks you to run `npm install @syncfusion/ej2-react-inputs`. Skip that and the examples will not compile, since every import comes from that package.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-inputs -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/syncfusion-react-inputs/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-inputs/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-inputs -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/syncfusion-react-inputs/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-inputs -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/syncfusion-react-inputs/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install syncfusion/react-ui-components-skills syncfusion-react-inputs
```

2. **Manually: put the files in place**
- File: `.github/skills/syncfusion-react-inputs/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-inputs -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-inputs
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/syncfusion-react-inputs/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-inputs -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-inputs/SKILL.md

## When to use it
- build a file upload with chunking and pause
- cap uploads by file type and size
- add a numeric field with formatting and validation
- put OTP entry or a signature pad into a form
- replace the default browse button with a custom one

## Example prompts
- Add file upload to the form with `UploaderComponent` and 500000-byte chunks
- Create a numeric field with min and max values and validation
- Turn on `directoryUpload` so a whole folder can be uploaded

## Similar
- [forms-inputs](https://affpapa.org/en/nevibecode/skills/forms-inputs.md) — skill · 509 installs
- [inertia-rails-forms](https://affpapa.org/en/nevibecode/skills/inertia-rails-forms.md) — skill · 486 installs
- [react-component-generator](https://affpapa.org/en/nevibecode/skills/react-component-generator.md) — skill · 318 installs
- [forms-inputs-checkout](https://affpapa.org/en/nevibecode/skills/forms-inputs-checkout.md) — skill · 524 installs
- [react-hook-form-zod](https://affpapa.org/en/nevibecode/skills/react-hook-form-zod.md) — skill · 722 installs
- [react-joyride](https://affpapa.org/en/nevibecode/skills/react-joyride.md) — skill · 686 installs

From the same set: [syncfusion/react-ui-components-skills](https://affpapa.org/en/nevibecode/by/syncfusion/react-ui-components-skills.md) — 57 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md