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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

@using Syncfusion.Blazor.Inputs

<SfUploader AutoUpload="true" AllowedExtensions=".jpg,.jpeg,.png,.pdf">
    <UploaderAsyncSettings 
        SaveUrl="api/upload/save" 
        RemoveUrl="api/upload/remove">
    </UploaderAsyncSettings>
</SfUploader>

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

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

• 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

• 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

• 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

• 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

@using Syncfusion.Blazor.Inputs

<SfTextArea @bind-Value="@description"
            Placeholder="Enter description..."
            RowCount="5"
            ColumnCount="50"
            MaxLength="500"
            FloatLabelType="FloatLabelType.Auto">
</SfTextArea>

@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 <EditForm> with model binding
• Use @bind-Value with ValueExpression
• Apply [Required] or [StringLength] attributes
• Display validation messages with <ValidationMessage>
• 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

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 <EditForm> └─ 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

• 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

• 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

• 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

• 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

• 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

@using Syncfusion.Blazor.Inputs

<div class="signature-container">
    <label>Sign below:</label>
    <SfSignature @ref="signatureRef"
                 StrokeColor="#000000"
                 BackgroundColor="#FFFFFF"
                 MaxStrokeWidth="2.0"
                 MinStrokeWidth="0.5">
    </SfSignature>
    
    <div class="signature-actions">
        <button @onclick="SaveSignature">Save</button>
        <button @onclick="ClearSignature">Clear</button>
    </div>
</div>

@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

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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

@using Syncfusion.Blazor.Inputs

<div class="range-slider-container">
    <label>Select Price Range: $@priceRange[0] - $@priceRange[1]</label>
    <SfSlider @bind-Value="@priceRange"
              Type="SliderType.Range"
              Min="0"
              Max="1000"
              Step="10">
        <SliderTicks Placement="Placement.After" LargeStep="200" SmallStep="50" ShowSmallTicks="true"></SliderTicks>
        <SliderTooltip IsVisible="true" ShowOn="TooltipShowOn.Always" Format="C0"></SliderTooltip>
    </SfSlider>
</div>

@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

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

• 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

• 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

• 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

• 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

• 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

@using Syncfusion.Blazor.Inputs

<div class="otp-container">
    <label>Enter verification code:</label>
    <SfOtpInput @bind-Value="@otpValue"
                Length="6"
                Type="OtpInputType.Number"
                StylingMode="OtpInputStyle.Outlined">
    </SfOtpInput>
    
    @if (!string.IsNullOrEmpty(message))
    {
        <div class="message">@message</div>
    }
</div>

@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

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

• 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

• 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

• 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

• 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

• 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

@using Syncfusion.Blazor.Inputs

<div class="rating-container">
    <label>Rate your experience:</label>
    <SfRating @bind-Value="@userRating"
              ItemsCount="5"
              Precision="PrecisionType.Full"
              ShowLabel="true">
    </SfRating>
    
    @if (userRating > 0)
    {
        <p>You rated: @userRating / 5 stars</p>
    }
</div>

@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

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)