Implementing Syncfusion Blazor FileUpload

FileUpload

Documentation

Getting Started

• 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

• 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

• 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

• 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

• 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

• 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

• Custom file list templates
• CSS class customization
• Theme Studio integration
• Custom button styling
• Dark mode support
• Responsive design patterns

File Source Options

• 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

• 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

• 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

AllowMultiple="false"

AllowMultiple="true"

SequentialUpload="false"

AllowMultiple="true"

SequentialUpload="true"

ChunkSize

Paused

OnResume

TextArea

Documentation

Getting Started

• 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

• 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

• 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

• 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

ResizeMode="Resize.None"

RowCount

ResizeMode="Resize.Vertical"

ResizeMode="Resize.Horizontal"

ResizeMode="Resize.Both"

MaxLength

<EditForm>

ValueExpression

Signature

Documentation

Getting Started

• 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

• 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

• 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

• 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

• 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

BackgroundImage

SaveWithBackground="true"

MaxStrokeWidth

RangeSlider

Documentation

Getting Started

• 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

• 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

• 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

• 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

• 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

• 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

• 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

Type="SliderType.Range"

CustomValues

SliderColorRanges

ColorRange

SliderLimits

Orientation="SliderOrientation.Vertical"

IsImmediateValue="true"

OtpInput

Documentation

Getting Started

• 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

• 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

• 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

• 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

• 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

Type="OtpInputType.Number"

Length="4"

Length="6"

Type="OtpInputType.Password"

Type="OtpInputType.Text"

TextTransform="TextTransform.Uppercase"

Separator

ValueChanged

value.Length == Length

StylingMode="OtpInputStyle.Outlined"

StylingMode="OtpInputStyle.Underlined"

StylingMode="OtpInputStyle.Filled"

AriaLabels

AutoFocus

Rating

Documentation

Getting Started

• 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

• 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

• 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

• 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

• 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 satisfaction
3. Skill Assessments: Employee evaluations, competency ratings, training feedback, proficiency levels
4. Content Rating: Article feedback, video ratings, course reviews, documentation usefulness
5. User Experience: App store ratings, feature satisfaction, usability scores, NPS surveys
6. Performance Reviews: Team member evaluations, project ratings, goal achievements, KPI tracking
7. Survey Responses: Satisfaction surveys, opinion polls, feedback forms, questionnaires
8. Quality Control: Inspection ratings, compliance scoring, audit results, quality metrics
9. Entertainment: Movie ratings, music reviews, book ratings, game scores
10. Sentiment Analysis: Customer sentiment, brand perception, mood tracking, emotional feedback

Quick Decision Tree

ReadOnly="true"

Precision="PrecisionType.Exact"

ShowLabel="true"

Precision="PrecisionType.Full"

Precision="PrecisionType.Half"

Precision="PrecisionType.Quarter"

Precision="PrecisionType.Exact"

ItemsCount="3"

ItemsCount="7"

ItemsCount="10"

EmptyTemplate

FullTemplate

EnableSingleSelection="true"

ItemsCount="1"

ItemsCount="2"

<EditForm>

ValueChanged

ShowLabel="true"

LabelTemplate

ShowTooltip="true"

TooltipTemplate

InputMask

Documentation

Getting Started

• Installation and NuGet package setup
• Basic SfMaskedTextBox component setup
• Namespace imports and service registration
• CSS theme configuration
• Simple mask examples (phone, date, SSN)
• Value binding basics
• Minimal working example

Mask Patterns and Configuration

• Standard mask characters (0, 9, L, ?, A, &, C, #)
• Predefined patterns (phone, SSN, ZIP, date, time)
• Mask property configuration
• Literal characters in masks
• Optional vs required positions
• Complex pattern examples
• International format patterns
• Pattern validation rules

Custom Characters and Formatting

• CustomCharacters dictionary usage
• Creating custom mask rules
• Regex-based character validation
• Advanced pattern customization
• Use cases (license plates, product codes, etc.)
• Combining custom with standard masks
• Best practices for custom rules

Prompt Character Configuration

• PromptChar property (default: _)
• PromptPlaceholder for display
• EnableLiterals for value inclusion
• Placeholder vs PromptChar difference
• Visual feedback configuration
• User experience considerations
• Examples with different configurations

Events and Data Binding

• Value property and @bind-Value
• ValueChange event (MaskChangeEventArgs)
• ValueChanged event callback
• Focus and Blur events (MaskFocusEventArgs, MaskBlurEventArgs)
• OnChange vs OnInput vs ValueChange timing
• EditForm integration with EditContext
• ValueExpression for validation
• Real-time validation patterns
• Event handler best practices

Styling and Accessibility

• FloatLabelType configuration
• ShowClearButton functionality
• CssClass for custom styling
• Width and responsive sizing
• Enabled vs Readonly states
• Theme customization with Theme Studio
• WCAG 2.1 compliance
• Keyboard navigation
• ARIA attributes
• Screen reader support
• RTL (EnableRtl) support
• HtmlAttributes and InputAttributes
• Accessibility best practices

Quick Start Example

@using Syncfusion.Blazor.Inputs

<div class="input-mask-container">
    <label>Phone Number:</label>
    <SfMaskedTextBox @bind-Value="@phoneNumber"
                     Mask="(000) 000-0000"
                     Placeholder="Enter phone number"
                     FloatLabelType="FloatLabelType.Auto">
    </SfMaskedTextBox>
    
    <label>Social Security Number:</label>
    <SfMaskedTextBox @bind-Value="@ssn"
                     Mask="000-00-0000"
                     PromptChar="#"
                     Placeholder="Enter SSN">
    </SfMaskedTextBox>
</div>

@code {
    private string phoneNumber = "";
    private string ssn = "";
}

Common Patterns

Pattern 1: Phone Number Input (US Format)

• Use mask

  "(000) 000-0000"

  for US phone numbers
• Set

  PromptChar="_"

  for clear visual feedback
• Enable

  @bind-Value

  for two-way binding
• Use

  FloatLabelType.Auto

  for modern UX
• Configure

  Placeholder

  for user guidance
• Set

  EnableLiterals="false"

  to exclude parentheses/dashes from value

Pattern 2: Social Security Number (SSN)

• Use mask

  "000-00-0000"

  for SSN format
• Set

  PromptChar="#"

  or

  PromptChar="*"

  for privacy
• Apply

  Readonly="false"

  for input,

  Readonly="true"

  for display
• Use

  ShowClearButton="true"

  for quick reset
• Implement validation with

  ValueChange

  event
• Consider masking display value for security

Pattern 3: Credit Card Number with Separators

• Use mask

  "0000 0000 0000 0000"

  for 16-digit cards
• Set

  EnableLiterals="false"

  to get digits only
• Listen to

  ValueChange

  to detect card type (Visa, MC, Amex)
• Show card brand icon based on first digits
• Apply real-time Luhn algorithm validation
• Use

  PromptChar="X"

  for clear empty positions

Pattern 4: Date Input with Custom Format

• Use mask

  "00/00/0000"

  for MM/DD/YYYY format
• Or

  "00-00-0000"

  for DD-MM-YYYY format
• Set

  Placeholder="MM/DD/YYYY"

  for format guidance
• Implement custom validation for valid dates
• Use

  ValueChange

  to validate day/month ranges
• Consider using DatePicker component for complex date selection

Pattern 5: Custom Product Code Format

• Define

  CustomCharacters

  dictionary for special rules
• Example:

  @(new Dictionary<string, string> { { "P", "[A-Z]" }, { "N", "[0-9]" } })

• Use mask like

  "PPP-NNN-NNN"

  for ABC-123-456 format
• Combine standard and custom characters
• Apply

  TextTransform

  for uppercase conversion
• Validate against business rules in events

Pattern 6: International Phone with Custom Characters

• Use

  CustomCharacters

  for country-specific patterns
• Example:

  "+00 (000) 000-0000"

  with country code
• Set

  EnableLiterals="true"

  to include + and formatting
• Display country flag based on code
• Implement dynamic mask switching per country
• Support multiple international formats

Key Props

Common Use Cases

1. Contact Information: Phone numbers, fax numbers, mobile numbers with country codes
2. Personal Identification: SSN, tax ID, national ID, passport numbers, driver's license
3. Financial Data: Credit card numbers, bank account numbers, routing numbers, CVV codes
4. Dates and Times: Custom date formats, time entry, date ranges with specific patterns
5. Postal Codes: ZIP codes (US), postal codes (international), area codes with formatting
6. Product Identification: SKU numbers, serial numbers, product codes, barcode entry
7. License Numbers: Vehicle plates, software licenses, registration numbers with patterns
8. Network Information: IP addresses, MAC addresses, subnet masks with dot notation
9. Version Numbers: Software versions (1.2.3), build numbers with custom formats
10. Custom Codes: Voucher codes, promo codes, tracking numbers with specific patterns

Quick Decision Tree

Mask="(000) 000-0000"

Mask="000-00-0000"

Mask="00000"

Mask="00000-0000"

Mask="0000 0000 0000 0000"

Mask="00/00/0000"

Mask="00:00"

EnableLiterals="false"

EnableLiterals="true"

CustomCharacters

"PPP-000-NNN"

PromptChar="*"

PromptChar="#"

Readonly="true"

CustomCharacters

<EditForm>

ValueExpression

ValueChange

FloatLabelType="FloatLabelType.Auto"

ShowClearButton="true"

Placeholder

HtmlAttributes

ColorPicker

Documentation

Getting Started

• Installation and NuGet package setup
• Basic SfColorPicker component setup
• Namespace imports and service registration
• CSS theme configuration
• Value binding with color formats
• Mode overview (Picker vs Palette)
• Minimal working example

Modes and Configuration

• ColorPickerMode (Picker vs Palette)
• Picker mode for gradient color selection
• Palette mode for predefined color grids
• Inline vs Popup display options
• ModeSwitcher for user mode selection
• Columns configuration for palette layout
• ShowButtons for Apply/Cancel actions
• Mode-specific behaviors and use cases

Preset Colors and Palettes

• PresetColors dictionary configuration
• Custom color palette groups
• Default preset color collections
• ShowRecentColors functionality
• NoColor option for "no selection"
• Organizing preset categories
• Business and design use cases

Opacity and Value Formats

• EnableOpacity for alpha channel control
• Opacity slider configuration
• Value formats (hex, rgba, hsva)
• Reading and setting opacity values
• Transparent color handling
• Use cases (overlays, highlights, transparency)

Events and Data Binding

• Value property and two-way binding (@bind-Value)
• ValueChanged event callback
• Selected event with ColorPickerEventArgs
• OnOpen and OnClose events for popup control
• ModeSwitched event handling
• OnTileRender for custom palette tiles
• Form integration with EditForm
• Real-time color preview patterns

Customization and Accessibility

• ShowButtons configuration
• CssClass for custom styling
• Disabled and EnableRtl states
• HtmlAttributes customization
• Keyboard navigation support
• ARIA attributes for accessibility
• WCAG 2.1 compliance
• Theme customization with Theme Studio
• Responsive design patterns

Quick Start Example

@using Syncfusion.Blazor.Inputs

<div class="colorpicker-container">
    <label>Choose a color:</label>
    <SfColorPicker @bind-Value="@selectedColor"
                   Mode="ColorPickerMode.Palette"
                   ShowButtons="true">
    </SfColorPicker>
    
    <div class="color-preview" style="background-color: @selectedColor;">
        Selected: @selectedColor
    </div>
</div>

@code {
    private string selectedColor = "#008000";
}

Common Patterns

Pattern 1: Basic Palette Color Picker

• Use

  Mode="ColorPickerMode.Palette"

  for predefined color grid
• Enable

  @bind-Value

  for two-way binding
• Set

  ShowButtons="true"

  for Apply/Cancel actions
• Use default PresetColors or customize
• Bind to string variable for hex values
• Display preview with selected color

Pattern 2: Advanced Gradient Picker with Opacity

• Set

  Mode="ColorPickerMode.Picker"

  for gradient selector
• Enable

  EnableOpacity="true"

  for alpha channel
• Use

  ModeSwitcher="true"

  to allow mode switching
• Display rgba value for transparency
• Ideal for design tools, graphics editors
• Show real-time preview with opacity

Pattern 3: Inline Color Selector (No Popup)

• Set

  Inline="true"

  for always-visible picker
• Use for color customization panels
• No popup trigger, immediate display
• Works with both Picker and Palette modes
• Combine with

  ShowButtons="false"

  for instant selection
• Perfect for settings panels, theme builders

Pattern 4: Custom Preset Palette

• Define

  PresetColors

  dictionary with custom groups
• Organize by categories (brand colors, pastels, etc.)
• Set

  Columns

  property for grid layout
• Use

  ShowRecentColors="true"

  for history
• Enable

  NoColor="true"

  for "no selection" option
• Ideal for brand color systems, design systems

Key Props

Common Use Cases

1. UI Theme Customization: User-selectable themes, color scheme builders, personalization
2. Design Tools: Graphic editors, drawing apps, image annotation, markup tools
3. Data Visualization: Chart color selection, graph customization, report styling
4. Branding: Logo colors, brand identity, style guide implementation, corporate colors
5. Web Design: CSS color selection, background colors, text colors, border colors
6. Product Customization: Product color variants, custom merchandise, personalization
7. Highlighting Tools: Text highlighters, annotation colors, emphasis markers
8. Dashboard Customization: Widget colors, status indicators, category colors
9. Form Builders: Custom form styling, input colors, validation colors
10. Calendar/Scheduling: Event colors, category coding, priority indicators

Quick Decision Tree

Mode="ColorPickerMode.Palette"

PresetColors

Columns

Mode="ColorPickerMode.Picker"

ModeSwitcher="true"

EnableOpacity="true"

Inline="true"

ShowButtons="false"

Inline="false"

ShowButtons="true"

Selected

ShowRecentColors="true"

NoColor="true"

PresetColors

<EditForm>

ValueChanged

HtmlAttributes