# Syncfusion Blazor Inputs > Implement Syncfusion Blazor Input components including FileUpload, TextBox, NumericTextBox, TextArea, Signature, RangeSlider, OtpInput, Rating, InputMask, and ColorPicker. Use this when working with file uploads, text entry, numeric values, multi-line text inputs, signatures, ratings, or color selection. This skill covers input validation, events, data binding, and advanced customization options for all input-related components in Blazor applications. - Skill: `syncfusion-blazor-ui-components/syncfusion-blazor-inputs` (Agent Skill, multi-file: 64 files) - Install (CLI): `npx skillmds add syncfusion-blazor-ui-components/syncfusion-blazor-inputs` - Raw SKILL.md: https://api.skillmd.com/api/skills/syncfusion-blazor-ui-components/syncfusion-blazor-inputs/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: syncfusion (https://skillmd.com/u/syncfusion-blazor-ui-components) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/syncfusion-blazor-ui-components/syncfusion-blazor-inputs --- # Implementing Syncfusion Blazor FileUpload This skill covers the Syncfusion Blazor FileUpload component, a robust solution for file handling in Blazor applications. Learn to implement single and multiple file uploads, configure validation rules, enable drag-drop interactions, handle large files with chunked uploads, and leverage comprehensive events for complete upload control and user feedback. --- ## FileUpload Learn to implement Syncfusion Blazor File Upload component with async/sync uploads, validation, events, customization, and always get immediate file handling with drag-drop or form integration for web and server applications. ### Documentation #### Getting Started 📄 **Read:** [references/file-upload-getting-started.md](references/file-upload-getting-started.md) - Installation and NuGet package setup - Visual Studio/Visual Studio Code setup steps - Blazor WebAssembly vs Server configuration - Basic SfUploader component rendering - CSS and script imports - Minimal working example #### Core Configuration 📄 **Read:** [references/file-upload-configuration.md](references/file-upload-configuration.md) - ID property for component identification - AllowedExtensions for file type restriction - AllowMultiple vs single file uploads - AutoUpload behavior configuration - SequentialUpload for ordered processing - DirectoryUpload capability - Enabled state and component control #### Upload Methods & Behavior 📄 **Read:** [references/file-upload-file-upload-methods.md](references/file-upload-file-upload-methods.md) - Synchronous vs asynchronous uploads - Save URL and Remove URL configuration - Upload button click handlers - Automatic vs manual upload triggering - Upload progress tracking mechanisms - Backend API requirements #### Events & Handlers 📄 **Read:** [references/file-upload-events-and-handlers.md](references/file-upload-events-and-handlers.md) - ValueChange event for direct file access (Blazor Server only, without AsyncSettings) - FileSelected event for pre-validation - Created event for initialization logic - OnFileListRender for custom file display - OnUploadStart, Success, OnFailure events (use with AsyncSettings) - Event handler patterns and best practices - **Important:** ValueChange and UploaderAsyncSettings are mutually exclusive #### File Validation 📄 **Read:** [references/file-upload-validation.md](references/file-upload-validation.md) - File type validation strategies - File size constraints (MinFileSize, MaxFileSize) - Custom validation functions - Preventing invalid file uploads - Error messages and user feedback - Validation within EditForm #### Advanced Features 📄 **Read:** [references/file-upload-advanced-features.md](references/file-upload-advanced-features.md) - Chunked upload for large files - Pause and resume functionality - Async/await patterns in event handlers - MemoryStream processing without disk I/O - Batch upload operations - Retry and recovery mechanisms #### Customization & Styling 📄 **Read:** [references/file-upload-customization.md](references/file-upload-customization.md) - Custom file list templates - CSS class customization - Theme Studio integration - Custom button styling - Dark mode support - Responsive design patterns #### File Source Options 📄 **Read:** [references/file-upload-file-source-options.md](references/file-upload-file-source-options.md) - Drag-and-drop upload implementation - Form integration patterns - Direct file picker interaction - Browser file dialog usage - Directory selection and upload - Multiple input method combinations - Accessibility best practices #### Localization & Accessibility 📄 **Read:** [references/file-upload-localization-accessibility.md](references/file-upload-localization-accessibility.md) - Multi-language UI support - Locale configuration options - Custom text labels - WCAG 2.1 compliance - Keyboard navigation implementation - Screen reader support - ARIA attributes #### Platform-Specific Setup 📄 **Read:** [references/file-upload-platform-specific-setup.md](references/file-upload-platform-specific-setup.md) - Blazor WebAssembly app setup - Blazor Server app setup - Blazor Web App (.NET 8+) setup - MAUI integration - Different render modes - Platform-specific considerations ### Quick Start Example ```razor @using Syncfusion.Blazor.Inputs ``` ### Common Patterns #### Pattern 1: Basic File Upload with Validation (Server Upload) - Use `AutoUpload="true"` for instant uploads - Configure `UploaderAsyncSettings` with SaveUrl/RemoveUrl - Set `AllowedExtensions` to restrict file types - Listen to `FileSelected` event for pre-validation - Use `Success`/`OnFailure` events for upload feedback #### Pattern 2: Direct File Access (Blazor Server Only) - Use `ValueChange` event to access file content directly - **Do NOT use** `UploaderAsyncSettings` with ValueChange - Process files in memory or save to directory - Best for file preview, Base64 conversion, or direct storage #### Pattern 3: Multiple File Handling - Set `AllowMultiple="true"` to allow batch uploads - Use `SequentialUpload` for ordered processing - Track progress with upload events - Display file list with individual progress indicators #### Pattern 4: Large File Upload with Chunking - Configure `ChunkSize` in `UploaderAsyncSettings` - Enable pause/resume with chunk upload - Implement retry logic for failed chunks - Show chunk-level progress to user ### Key Props | Property | Default | Use When | |----------|---------|----------| | AutoUpload | true | Upload files immediately after selection | | AllowMultiple | true | User needs to upload multiple files | | SequentialUpload | false | Files must upload one at a time | | AllowedExtensions | "" | Only specific file types allowed | | DirectoryUpload | false | User can select entire folders | | MaxFileSize | 28.4 MB | Limiting maximum upload file size | | MinFileSize | 0 | Setting minimum file size requirement | | ChunkSize | 0 (disabled) | Enable chunked upload for large files | | ShowFileList | true | Control visibility of uploaded file list | | ShowProgressBar | true | Display upload progress indicator | | Enabled | true | Enable or disable the uploader | | DropArea | null | Specify custom drop zone CSS selector | | CssClass | "" | Apply custom CSS classes | | TabIndex | 0 | Set tab navigation order | | EnablePersistence | false | Maintain state across page reloads | | EnableRtl | false | Enable right-to-left layout | ### Common Use Cases 1. **Document Upload**: Resume, PDF, certification file uploads 2. **Image Gallery**: User profile pictures, photo collections 3. **Data Import**: CSV/Excel file imports for data processing 4. **Media Library**: Video, audio file uploads and management 5. **Backup Uploads**: Database backups, configuration files 6. **Report Generation**: Monthly reports, analytics data 7. **Invoice Processing**: Financial document uploads 8. **User Attachments**: Email attachments, message files ### Quick Decision Tree **User needs file upload functionality** ├─ Single file only? → Set `AllowMultiple="false"` + use basic setup ├─ Multiple files? │ ├─ All at once? → `AllowMultiple="true"` + `SequentialUpload="false"` │ └─ One at a time? → `AllowMultiple="true"` + `SequentialUpload="true"` └─ Large files (>100MB)? ├─ Enable chunking → Set `ChunkSize` property └─ Add pause/resume → Listen to `Paused` and `OnResume` events --- ## TextArea Learn to implement Syncfusion Blazor TextArea component for multi-line text input with configurable resize modes, row/column sizing, character limits, floating labels, and comprehensive validation. Perfect for comments, descriptions, messages, and any scenario requiring extended text entry with real-time feedback and form integration. ### Documentation #### Getting Started 📄 **Read:** [references/textarea-getting-started.md](references/textarea-getting-started.md) - Installation and NuGet package setup - Basic SfTextArea component setup - Namespace imports and service registration - CSS theme configuration - Minimal working example - Initial component rendering #### Configuration Options 📄 **Read:** [references/textarea-configuration.md](references/textarea-configuration.md) - RowCount and ColumnCount for sizing - ResizeMode (Vertical, Horizontal, Both, None) - MaxLength property for character limits - Placeholder text configuration - FloatLabelType (Auto, Always, Never) - ReadOnly and Disabled states - Width property and responsive sizing - HTML attributes customization #### Events and Data Binding 📄 **Read:** [references/textarea-events-binding.md](references/textarea-events-binding.md) - Value property and two-way binding (@bind-Value) - ValueChange event for real-time updates - Focus and Blur events (TextAreaFocusInEventArgs, TextAreaFocusOutEventArgs) - Input event for keystroke tracking - Created and Destroyed lifecycle events - Form validation integration with EditForm - ValueExpression for validation binding #### Customization and Styling 📄 **Read:** [references/textarea-customization.md](references/textarea-customization.md) - CssClass for custom styling - ShowClearButton for quick text removal - InputAttributes and HtmlAttributes - Theme customization with Theme Studio - Responsive design patterns - Accessibility features (ARIA, keyboard navigation) - RTL (Right-to-Left) support with EnableRtl ### Quick Start Example ```razor @using Syncfusion.Blazor.Inputs @code { private string description = ""; } ``` ### Common Patterns #### Pattern 1: Basic Multi-Line Input - Use `RowCount` to set visible lines (default: 2) - Set `Placeholder` for user guidance - Enable `@bind-Value` for two-way binding - Apply `MaxLength` for character constraints #### Pattern 2: Resizable TextArea with Limits - Set `ResizeMode="Resize.Both"` for user resizing - Configure `RowCount` and `ColumnCount` for initial size - Use `MaxLength` to prevent excessive input - Listen to `ValueChange` for live character counting #### Pattern 3: Form Integration with Validation - Wrap in `` with model binding - Use `@bind-Value` with `ValueExpression` - Apply `[Required]` or `[StringLength]` attributes - Display validation messages with `` - Style invalid state with CSS #### Pattern 4: Auto-Growing TextArea - Set `ResizeMode="Resize.Vertical"` for vertical expansion - Start with minimal `RowCount` (e.g., 3) - Allow user to expand as needed - Combine with `MaxLength` for upper bounds ### Key Props | Property | Default | Use When | |----------|---------|----------| | Value | "" | Binding textarea content | | RowCount | 2 | Setting visible number of rows | | ColumnCount | 20 | Setting visible number of columns | | MaxLength | null | Limiting maximum characters | | ResizeMode | Resize.Both | Controlling user resize behavior | | Placeholder | "" | Showing hint text when empty | | FloatLabelType | FloatLabelType.Never | Enabling floating label animation | | ShowClearButton | false | Adding quick clear functionality | | ReadOnly | false | Preventing user edits while showing content | | Disabled | false | Disabling the component entirely | | Width | "100%" | Setting component width | | CssClass | "" | Applying custom CSS classes | | EnableRtl | false | Enabling right-to-left text direction | ### Common Use Cases 1. **Comment Sections**: User feedback, review comments, discussion threads 2. **Form Descriptions**: Product descriptions, bio sections, about fields 3. **Message Composition**: Email bodies, chat messages, note-taking 4. **Code/JSON Input**: Configuration files, script input, data entry 5. **Address Fields**: Multi-line address entry with street, city, etc. 6. **Search Queries**: Complex search inputs with multiple criteria 7. **Customer Support**: Ticket descriptions, issue reporting, help requests 8. **Content Management**: Article drafts, blog post editing, documentation ### Quick Decision Tree **User needs multi-line text input** ├─ Fixed size? → Set `ResizeMode="Resize.None"` + specific `RowCount` ├─ User-resizable? │ ├─ Vertical only? → `ResizeMode="Resize.Vertical"` │ ├─ Horizontal only? → `ResizeMode="Resize.Horizontal"` │ └─ Both directions? → `ResizeMode="Resize.Both"` ├─ Character limit needed? → Set `MaxLength` property └─ Form validation? ├─ Use within `` └─ Add `ValueExpression` for validation binding --- ## Signature Learn to implement Syncfusion Blazor Signature component for capturing digital signatures with configurable stroke width, colors, background images, save/load functionality in multiple formats (PNG, JPEG, SVG), and comprehensive event handling. Perfect for e-signatures, document approval workflows, digital consent forms, and any scenario requiring handwritten signature capture with touch and mouse support. ### Documentation #### Getting Started 📄 **Read:** [references/signature-getting-started.md](references/signature-getting-started.md) - Installation and NuGet package setup - Basic SfSignature component setup - Namespace imports and service registration - CSS theme configuration - Canvas rendering and initialization - Touch and mouse input support - Minimal working example #### Drawing Configuration 📄 **Read:** [references/signature-drawing-configuration.md](references/signature-drawing-configuration.md) - MinStrokeWidth and MaxStrokeWidth for pen thickness - StrokeColor for ink color customization - BackgroundColor for canvas background - BackgroundImage for letterhead/watermark - Velocity property for stroke smoothness - Drawing behavior and responsiveness - Pressure sensitivity simulation #### Save and Load Signatures 📄 **Read:** [references/signature-save-load.md](references/signature-save-load.md) - Save() method with format options (PNG, JPEG, SVG) - SaveWithBackground property configuration - GetSignature() for Base64 string retrieval - Load() method for existing signatures - Clear() method for signature removal - File format selection and quality settings - Server integration patterns - Database storage strategies #### Event Handling 📄 **Read:** [references/signature-events.md](references/signature-events.md) - Changed event for stroke tracking - OnSave event for save operations - Created event for initialization - Event argument structure - Real-time signature validation - Detecting empty vs filled signatures - Event-driven workflows #### Customization and Styling 📄 **Read:** [references/signature-customization.md](references/signature-customization.md) - Disabled and IsReadOnly states - HtmlAttributes for custom styling - Canvas size customization - Theme integration - Mobile and touch device optimization - Accessibility considerations - Responsive design patterns ### Quick Start Example ```razor @using Syncfusion.Blazor.Inputs
@code { private SfSignature signatureRef; private async Task SaveSignature() { await signatureRef.SaveAsync(SignatureFileType.Png, "signature.png"); } private async Task ClearSignature() { await signatureRef.ClearAsync(); } } ``` ### Common Patterns #### Pattern 1: Basic Signature Capture - Use default stroke settings for natural handwriting feel - Set `BackgroundColor="#FFFFFF"` for clear canvas - Provide Clear button for user corrections - Save as PNG for universal compatibility - Validate signature is not empty before submission #### Pattern 2: Document Signing with Letterhead - Use `BackgroundImage` for company letterhead or form template - Set `SaveWithBackground="true"` to include background in saved file - Configure `StrokeColor` to contrast with background - Save as PNG or JPEG with background embedded - Ideal for contracts, agreements, official documents #### Pattern 3: Mobile-Optimized Signature - Increase stroke width for better touch visibility - Use larger canvas size for thumb-friendly drawing - Set `IsReadOnly="false"` only when signature mode active - Auto-save on signature completion - Provide clear visual feedback for touch interactions #### Pattern 4: Multi-Signature Forms - Use multiple SfSignature components for different signatories - Track completion state per signature field - Save each signature with unique identifier - Combine signatures in final document generation - Validate all required signatures before form submission ### Key Props | Property | Default | Use When | |----------|---------|----------| | MinStrokeWidth | 0.5 | Setting minimum pen thickness | | MaxStrokeWidth | 2.0 | Setting maximum pen thickness | | StrokeColor | "#000000" | Changing ink color | | BackgroundColor | "#FFFFFF" | Setting canvas background color | | BackgroundImage | null | Adding letterhead or watermark image | | Velocity | 0.7 | Controlling stroke smoothness (0-1) | | SaveWithBackground | true | Including background in saved signature | | Disabled | false | Disabling signature capture entirely | | IsReadOnly | false | Preventing signature changes while showing existing | | EnablePersistence | false | Maintaining signature across page reloads | | HtmlAttributes | null | Adding custom HTML attributes to wrapper | ### Common Use Cases 1. **E-Signature Capture**: Digital document signing, contract approval, consent forms 2. **Financial Services**: Loan applications, account opening, transaction authorization 3. **Healthcare**: Patient consent forms, HIPAA agreements, medical records 4. **Legal Documents**: Contracts, NDAs, legal agreements, court documents 5. **HR Processes**: Employment contracts, onboarding documents, policy acknowledgments 6. **Delivery Confirmation**: Package delivery signatures, service completion 7. **Check-In Systems**: Visitor logs, attendance tracking, registration forms 8. **Educational**: Test proctoring, form submissions, parent consent ### Quick Decision Tree **User needs signature capture** ├─ Basic signature? │ └─ Use default settings + Save as PNG ├─ Document with letterhead? │ ├─ Set `BackgroundImage` property │ └─ Enable `SaveWithBackground="true"` ├─ Mobile/touch primary? │ ├─ Increase `MaxStrokeWidth` to 3.0+ │ └─ Use larger canvas dimensions ├─ Multiple signers? │ ├─ Use multiple SfSignature components │ ├─ Track each signature state separately │ └─ Save with unique identifiers └─ Need specific format? ├─ PNG → Universal support, transparency ├─ JPEG → Smaller file size, no transparency └─ SVG → Vector format, scalable --- ## RangeSlider Learn to implement Syncfusion Blazor Range Slider component with dual handles for range selection, ticks, tooltips, color ranges, movement limits, and always get immediate two-value selection for price filters, date ranges, temperature zones, or any scenario requiring range input with visual feedback and validation in Blazor applications. ### Documentation #### Getting Started 📄 **Read:** [references/rangeslider-getting-started.md](references/rangeslider-getting-started.md) - Installation and NuGet package setup - Basic SfSlider with Type="SliderType.Range" - Value binding with arrays for dual handles - CSS imports and theme configuration - Namespace imports and service registration - Minimal working example with range selection #### Range Configuration 📄 **Read:** [references/rangeslider-range-configuration.md](references/rangeslider-range-configuration.md) - Min, Max, and Step properties for range bounds - Type property (SliderType.Range vs Default) - Two-way value binding with arrays (@bind-Value) - Custom non-numeric values with CustomValues - IsImmediateValue for real-time updates - Value array structure and data types #### Ticks and Tooltip 📄 **Read:** [references/rangeslider-ticks-and-tooltip.md](references/rangeslider-ticks-and-tooltip.md) - SliderTicks component configuration - LargeStep and SmallStep for interval markers - Tick placement options (Before, After, Both) - ShowSmallTicks property for granular display - Format property for tick label customization - SliderTooltip component setup - Tooltip visibility modes (Focus, Hover, Always, Auto) - Tooltip placement and format customization - Custom tooltip templates #### Color Ranges and Visual Indication 📄 **Read:** [references/rangeslider-color-ranges-visual.md](references/rangeslider-color-ranges-visual.md) - SliderColorRanges for visual feedback - ColorRange components with Start, End, Color - Multiple color segments for different value zones - Use cases (temperature zones, price tiers, ratings) - Color customization and styling - Accessibility considerations for color choices #### Limits and Constraints 📄 **Read:** [references/rangeslider-limits-and-constraints.md](references/rangeslider-limits-and-constraints.md) - SliderLimits configuration for movement restrictions - MinStart, MinEnd, MaxStart, MaxEnd properties - Enabled property for limit activation - StartHandleFixed and EndHandleFixed for locked handles - Restricting handle movement within bounds - Use cases (booking date ranges, budget constraints) - Validation patterns with limits #### Orientation and Customization 📄 **Read:** [references/rangeslider-orientation-and-customization.md](references/rangeslider-orientation-and-customization.md) - Orientation property (Horizontal vs Vertical) - ShowButtons for increment/decrement controls - Width property for responsive sizing - EnableAnimation for smooth transitions - CssClass for custom styling - EnableRtl for right-to-left language support - ReadOnly and Enabled states - Theme customization with Theme Studio #### Events and Data Binding 📄 **Read:** [references/rangeslider-events-and-binding.md](references/rangeslider-events-and-binding.md) - SliderEvents component configuration - ValueChange event callback for range updates - OnChange vs Changed event timing - Created event for initialization logic - Rendered event for post-render operations - OnTooltipChange for dynamic tooltip content - OnTicksRender for custom tick label rendering - Form integration with EditForm - Validation with EditContext and data annotations ### Quick Start Example ```razor @using Syncfusion.Blazor.Inputs
@code { private int[] priceRange = new int[] { 200, 800 }; } ``` ### Common Patterns #### Pattern 1: Basic Range Selection - Set `Type="SliderType.Range"` for dual handles - Bind value to int[] or double[] array with two elements - Configure `Min`, `Max`, and `Step` properties - Enable tooltip with `IsVisible="true"` for user feedback - Use `ValueChange` event to capture range updates #### Pattern 2: Range with Visual Color Zones - Add `SliderColorRanges` component - Define multiple `ColorRange` segments (e.g., cold/warm/hot) - Set colors that provide clear visual distinction - Use for temperature, ratings, or risk indicators - Combine with ticks for precise value identification #### Pattern 3: Constrained Range Selection - Use `SliderLimits` to restrict handle movement - Set `MinStart`/`MaxStart` for first handle bounds - Set `MinEnd`/`MaxEnd` for second handle bounds - Enable `StartHandleFixed` or `EndHandleFixed` if one handle should be locked - Ideal for booking systems, budget planning, scheduling #### Pattern 4: Custom Value Range Selection - Use `CustomValues` array for non-numeric ranges - Example: string[] { "XS", "S", "M", "L", "XL", "XXL" } - Value array uses indices, not actual values - Display custom labels via tick formatting - Perfect for size selection, priority levels, skill ratings ### Key Props | Property | Default | Use When | |----------|---------|----------| | Type | SliderType.Default | Set to SliderType.Range for dual handles | | Value | new int[]{} | Binding range values (must be 2-element array) | | Min | 0 | Setting minimum selectable value | | Max | 100 | Setting maximum selectable value | | Step | 1 | Defining increment/decrement value | | CustomValues | null | Using non-numeric values (sizes, labels) | | IsImmediateValue | false | Getting real-time updates during drag | | ShowButtons | false | Adding increment/decrement buttons | | Orientation | SliderOrientation.Horizontal | Changing to vertical layout | | Width | null | Setting component width | | EnableAnimation | true | Controlling handle animation | | ReadOnly | false | Preventing user interaction while showing value | | Enabled | true | Enabling/disabling the entire component | ### Common Use Cases 1. **E-Commerce Price Filters**: Min/max price selection, budget range filtering 2. **Date Range Pickers**: Check-in/check-out dates, event duration, scheduling 3. **Temperature Control**: HVAC systems, oven settings, climate zones 4. **Age Range Selection**: Demographics, target audience, age restrictions 5. **Time Range Selection**: Working hours, availability slots, time windows 6. **Score/Rating Ranges**: Grade filtering, performance metrics, review scores 7. **Financial Planning**: Budget allocation, investment ranges, spending limits 8. **Resource Allocation**: CPU/memory limits, bandwidth throttling, capacity planning ### Quick Decision Tree **User needs range selection (two values)** ├─ Numeric range? │ ├─ Set `Type="SliderType.Range"` │ ├─ Use int[] or double[] for Value │ └─ Configure Min, Max, Step ├─ Non-numeric values (sizes, labels)? │ ├─ Set `CustomValues` array │ ├─ Value array contains indices │ └─ Use tick formatting for labels ├─ Need visual zones? │ ├─ Add `SliderColorRanges` component │ └─ Define multiple `ColorRange` segments ├─ Restrict movement? │ ├─ Use `SliderLimits` component │ ├─ Set MinStart/MaxStart/MinEnd/MaxEnd │ └─ Enable StartHandleFixed or EndHandleFixed if needed ├─ Vertical layout needed? │ └─ Set `Orientation="SliderOrientation.Vertical"` └─ Real-time updates during drag? └─ Set `IsImmediateValue="true"` --- ## OtpInput Learn to implement Syncfusion Blazor OtpInput (One-Time Password) component for secure verification code entry with configurable length, input types (number, text, password), styling modes (outlined, underlined, filled), automatic focus management, and comprehensive event handling. Perfect for 2FA authentication, email verification, SMS codes, PIN entry, and any scenario requiring secure multi-digit code input with keyboard navigation and accessibility support. ### Documentation #### Getting Started 📄 **Read:** [references/otpinput-getting-started.md](references/otpinput-getting-started.md) - Installation and NuGet package setup - Basic SfOtpInput component setup - Namespace imports and service registration - CSS theme configuration - Length property for OTP digit count - Value binding and retrieval - Minimal working example #### Configuration Options 📄 **Read:** [references/otpinput-configuration.md](references/otpinput-configuration.md) - Length property for digit count (default: 4) - Type property (Number, Text, Password) - Placeholder configuration for empty inputs - Separator for visual grouping - AutoFocus for immediate input - Disabled state management - ID and HtmlAttributes customization #### Styling Modes 📄 **Read:** [references/otpinput-styling-modes.md](references/otpinput-styling-modes.md) - StylingMode options (Outlined, Underlined, Filled) - TextTransform (None, Lowercase, Uppercase) - CssClass for custom styling - Theme customization with Theme Studio - Responsive design patterns - Visual states and focus indicators #### Events and Data Binding 📄 **Read:** [references/otpinput-events-binding.md](references/otpinput-events-binding.md) - Value property and two-way binding (@bind-Value) - ValueChanged event callback (use Value property only, NOT @bind-Value) - OnInput event with OtpInputEventArgs - OnFocus and OnBlur events - Created lifecycle event - Form validation integration - Real-time verification patterns - Auto-submit on completion #### Accessibility 📄 **Read:** [references/otpinput-accessibility.md](references/otpinput-accessibility.md) - AriaLabels array for individual input fields - Keyboard navigation (arrows, backspace, delete) - Screen reader support - WCAG 2.1 compliance - Focus management best practices - Password type accessibility considerations - Mobile device optimization ### Quick Start Example ```razor @using Syncfusion.Blazor.Inputs
@if (!string.IsNullOrEmpty(message)) {
@message
}
@code { private string otpValue = ""; private string message = ""; protected override void OnParametersSet() { if (otpValue.Length == 6) { message = "Verifying code..."; // Call verification API } } } ``` ### Common Patterns #### Pattern 1: Basic OTP Verification (6-digit numeric) - Set `Length="6"` for standard OTP length - Use `Type="OtpInputType.Number"` for numeric-only input - Enable `AutoFocus="true"` for immediate input - Use `@bind-Value` for two-way binding (simplest approach) - Validate and verify OTP on server #### Pattern 2: Email/SMS Verification Code - Configure `Length="4"` or `Length="6"` based on service - Use `Type="OtpInputType.Number"` for numeric codes - Set `StylingMode="OtpInputStyle.Underlined"` for clean look - Auto-focus first input on page load - Show countdown timer for code expiration - Provide "Resend code" functionality #### Pattern 3: Secure PIN Entry - Use `Type="OtpInputType.Password"` to mask input - Set `Length="4"` or `Length="6"` for PIN length - Apply `StylingMode="OtpInputStyle.Filled"` for modern look - Implement rate limiting for security - Clear input on failed attempts - Show visual feedback for validation #### Pattern 4: Alphanumeric Verification (with separators) - Set `Type="OtpInputType.Text"` for letters and numbers - Use `TextTransform="TextTransform.Uppercase"` for readability - Configure `Separator="-"` to visually group digits - Example: ABC-123-XYZ pattern - Set `Length="9"` (including separator positions) - Useful for activation codes, license keys ### Key Props | Property | Default | Use When | |----------|---------|----------| | Value | "" | Binding OTP value (two-way with @bind-Value) | | Length | 4 | Setting number of OTP input fields | | Type | OtpInputType.Number | Defining input type (Number, Text, Password) | | StylingMode | OtpInputStyle.Outlined | Choosing visual style (Outlined, Underlined, Filled) | | Placeholder | "" | Showing hint text in empty fields | | Separator | "" | Adding visual separator between groups | | TextTransform | TextTransform.None | Transforming text (None, Lowercase, Uppercase) | | AutoFocus | false | Auto-focusing first input on load | | Disabled | false | Disabling all input fields | | CssClass | "" | Applying custom CSS classes | | AriaLabels | null | Setting custom ARIA labels for each input | | HtmlAttributes | null | Adding custom HTML attributes | ### Common Use Cases 1. **Two-Factor Authentication (2FA)**: Login security, account verification, multi-factor authentication 2. **Email Verification**: Account activation, email confirmation, newsletter signup 3. **SMS Verification**: Phone number verification, mobile app login, transaction confirmation 4. **Password Reset**: Secure password recovery, account access restoration 5. **Transaction Verification**: Banking transactions, payment confirmation, fund transfers 6. **Access Control**: Building entry codes, secure area access, temporary access codes 7. **Device Pairing**: Bluetooth pairing codes, smart device setup, IoT device linking 8. **Activation Codes**: Software licenses, product activation, subscription validation ### Quick Decision Tree **User needs OTP/verification code input** ├─ Numeric only? │ ├─ Set `Type="OtpInputType.Number"` │ └─ Use `Length="4"` or `Length="6"` ├─ Need to hide input (PIN)? │ ├─ Set `Type="OtpInputType.Password"` │ └─ Apply security best practices ├─ Alphanumeric codes? │ ├─ Set `Type="OtpInputType.Text"` │ ├─ Use `TextTransform="TextTransform.Uppercase"` │ └─ Consider `Separator` for readability ├─ Auto-submit when complete? │ ├─ Listen to `ValueChanged` event │ ├─ Check if `value.Length == Length` │ └─ Call verification API automatically ├─ Custom styling needed? │ ├─ Outlined → `StylingMode="OtpInputStyle.Outlined"` (default) │ ├─ Underlined → `StylingMode="OtpInputStyle.Underlined"` │ └─ Filled → `StylingMode="OtpInputStyle.Filled"` └─ Accessibility important? ├─ Set `AriaLabels` array for screen readers └─ Enable `AutoFocus` for keyboard users --- ## Rating Learn to implement Syncfusion Blazor Rating component for intuitive rating and feedback collection with configurable precision modes (full, half, quarter, exact), custom icons and templates, label and tooltip support, comprehensive event handling, and accessibility features. Perfect for product reviews, skill assessments, satisfaction surveys, quality ratings, and any scenario requiring user feedback through star ratings or custom iconography with keyboard navigation and form integration. ### Documentation #### Getting Started 📄 **Read:** [references/rating-getting-started.md](references/rating-getting-started.md) - Installation and NuGet package setup - Basic SfRating component setup - Namespace imports and service registration - CSS theme configuration - ItemsCount property for rating scale - Value binding and retrieval - Minimal working example - Basic 5-star rating implementation #### Precision and Values 📄 **Read:** [references/rating-precision-and-values.md](references/rating-precision-and-values.md) - Precision property (Full, Half, Quarter, Exact) - Full precision for whole numbers only - Half precision for 0.5 increments - Quarter precision for 0.25 increments - Exact precision for decimal values - Min property for minimum rating value - AllowReset for clearing ratings - EnableSingleSelection for single-item mode - Value calculations and display #### Labels and Tooltips 📄 **Read:** [references/rating-labels-and-tooltips.md](references/rating-labels-and-tooltips.md) - ShowLabel property for label display - LabelPosition (Top, Bottom, Left, Right) - LabelTemplate for custom label formatting - ShowTooltip property for hover tooltips - TooltipTemplate for custom tooltip content - Dynamic label updates based on value - Contextual feedback patterns #### Templates and Customization 📄 **Read:** [references/rating-templates-customization.md](references/rating-templates-customization.md) - EmptyTemplate for unselected items - FullTemplate for selected items - RatingItemContext for template data - Custom icon implementation (hearts, thumbs, emojis) - SVG and icon font integration - CssClass for custom styling - EnableAnimation property - Theme customization and responsive design #### Events and States 📄 **Read:** [references/rating-events-and-states.md](references/rating-events-and-states.md) - ValueChanged event for rating updates - OnItemHover event with RatingHoverEventArgs - Created lifecycle event - Form validation integration - ReadOnly state for display-only ratings - Disabled state management - Visible property control - Keyboard navigation support - Accessibility features and ARIA attributes ### Quick Start Example ```razor @using Syncfusion.Blazor.Inputs
@if (userRating > 0) {

You rated: @userRating / 5 stars

}
@code { private double userRating = 0; } ``` ### Common Patterns #### Pattern 1: Basic 5-Star Product Rating - Use default `ItemsCount="5"` for standard rating - Set `Precision="PrecisionType.Full"` for whole stars only - Enable `@bind-Value` for two-way data binding - Show `ShowLabel="true"` to display rating value - Position label with `LabelPosition="LabelPosition.Right"` - Use `ValueChanged` event for auto-submit #### Pattern 2: Half-Star Rating with Hover Feedback - Set `Precision="PrecisionType.Half"` for 0.5 increments - Enable `ShowTooltip="true"` for hover feedback - Use `OnItemHover` event for preview - Display average ratings with `ReadOnly="true"` - Show rating count in custom label template - Implement real-time feedback messages #### Pattern 3: Custom Icon Templates (Hearts, Thumbs, Emojis) - Define `EmptyTemplate` for unselected state - Define `FullTemplate` for selected state - Use `RatingItemContext` for item-specific rendering - Implement custom icons (♥, 👍, 😊, etc.) - Apply `CssClass` for custom colors and sizing - Enable `EnableAnimation="true"` for smooth transitions #### Pattern 4: Multi-Category Rating Form - Create multiple `SfRating` components - Different `ItemsCount` per category if needed - Combine with `EditForm` for validation - Calculate overall rating average - Track completion with event handlers - Enable submit only when all ratings complete ### Key Props | Property | Default | Use When | |----------|---------|----------| | Value | 0 | Binding rating value (two-way with @bind-Value) | | ItemsCount | 5 | Setting number of rating items (stars) | | Precision | PrecisionType.Full | Defining rating granularity (Full, Half, Quarter, Exact) | | ShowLabel | false | Displaying rating value as text | | LabelPosition | LabelPosition.Right | Positioning label (Top, Bottom, Left, Right) | | ShowTooltip | false | Enabling hover tooltips | | AllowReset | true | Allowing users to clear their rating | | EnableSingleSelection | false | Single item selection mode (thumbs up/down) | | Min | null | Setting minimum rating value | | ReadOnly | false | Display-only mode for showing ratings | | Disabled | false | Disabling all interactions | | EnableAnimation | true | Enabling smooth transitions | | Visible | true | Controlling component visibility | | EmptyTemplate | null | Custom template for unselected items | | FullTemplate | null | Custom template for selected items | | LabelTemplate | null | Custom label content | | TooltipTemplate | null | Custom tooltip content | | CssClass | "" | Applying custom CSS classes | ### Common Use Cases 1. **Product Reviews**: E-commerce ratings, marketplace feedback, customer reviews, product quality assessment 2. **Service Quality**: Restaurant ratings, hotel reviews, delivery service feedback, support …(truncated)