syncfusion-blazor-toolkit-inputs

Implement Syncfusion Blazor Toolkit input components with binding, validation, and accessibility guidance.

19|8|Updated May 12, 2026
One-click install
npx skills add https://github.com/syncfusion/blazor-toolkit --skill syncfusion-blazor-toolkit-inputs-syncfusion
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: syncfusion-blazor-toolkit-inputs
Source: https://github.com/syncfusion/blazor-toolkit/tree/main/.github/skills/syncfusion-blazor-toolkit-inputs
Command: npx skills add https://github.com/syncfusion/blazor-toolkit --skill syncfusion-blazor-toolkit-inputs-syncfusion

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires Syncfusion.Blazor.Toolkit, and includes references (resource) components.

What problem does it solve? Building forms in Blazor with Syncfusion Toolkit input components involves subtle pitfalls: wrong generic type parameters, missing DataAnnotationsValidator, culture-dependent currency formatting, and file uploads that silently fail in Static SSR. This Skill provides the rules, anti-patterns, and per-component references needed to wire TextBox, TextArea, NumericTextBox, Uploader, CheckBox, RadioButton, and Switch correctly the first time. ## Core Features & Use Cases - Component implementation guidance: Covers SfTextBox, SfTextArea, SfNumericTextBox<T>, SfUploader, SfCheckBox<T>, SfRadioButton<T>, and SfSwitch<T> with correct TValue/TChecked generic typing and two-way binding patterns. - Anti-pattern detection: Documents common failures such as TChecked="string" runtime crashes, SfUploader in Static SSR, missing DataAnnotationsValidator, and locale-dependent currency formats, each with corrected code. - Form validation and accessibility: Explains EditForm/EditContext integration with DataAnnotations, plus WCAG 2.1 AA guidance for labels, ARIA attributes, keyboard navigation, and error announcements. - Use Case: When building a checkout form with a currency field, file upload, and terms checkbox, use this Skill to generate a working EditForm with culture-locked currency formatting, an interactive-mode SfUploader posting to a SaveUrl endpoint, and a properly typed tri-state CheckBox. ## Quick Start Ask the AI to create a Blazor EditForm using Syncfusion Toolkit inputs with a validated email TextBox, a currency NumericTextBox, and a terms CheckBox.

Frequently Asked Questions about syncfusion-blazor-toolkit-inputs

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

FAQPage Schema
How do I bind values in Syncfusion Blazor TextBox and NumericTextBox?▼

Use @bind-Value for two-way binding on SfTextBox and SfNumericTextBox. For NumericTextBox, the TValue generic parameter must match the bound C# type such as int or decimal, and it must be a struct implementing IFormattable.

How to use SfUploader for file uploads in Blazor?▼

SfUploader requires a SaveUrl pointing to an HTTP endpoint that accepts IFormFile and returns 200, never a static disk path. It only works in interactive render modes (Server, WebAssembly, or Auto), not Static SSR, and large uploads need OpenReadStream with maxAllowedSize.

Does Syncfusion Blazor Toolkit work in Static SSR render mode?▼

SfTextBox, SfTextArea, SfNumericTextBox, SfCheckBox, SfRadioButton, and SfSwitch work in Static SSR and all interactive modes. SfUploader and InputFile do not work in Static SSR because JavaScript interop and file streams are unavailable.

Why is my Blazor form validation with [Required] not working?▼

The [Required] attribute is silently ignored unless you include <DataAnnotationsValidator /> inside the EditForm. Add it as the first child of the EditForm along with ValidationMessage components to enforce DataAnnotations rules.

Why does SfCheckBox throw cannot convert null to bool?▼

This runtime error occurs when TChecked is set to string or another incompatible type. Use TChecked="bool" for standard checkboxes, or bool? with EnableTriState for three-state checkboxes supporting the indeterminate state.

How do I format currency consistently in SfNumericTextBox?▼

Format="C2" applies the current thread culture, so the currency symbol varies by user locale. For culture-stable display, use a literal pattern like Format="$#,##0.00" or set CultureInfo.DefaultThreadCurrentCulture once in Program.cs.