👁 Image
Syncfusion.Blazor.Inputs 33.2.13

Syncfusion® Blazor Input Components

A comprehensive Blazor input components including TextBox, TextArea, MaskedTextBox, NumericTextBox, Color Picker, File Upload, Slider, Rating, Signature, OTP Input, and SpeechToText. Features data validation, formatting, keyboard navigation, and accessibility support for .NET 8+.

Supported components

• Blazor TextBox
• Blazor MaskedTextBox
• Blazor NumericTextBox
• Blazor Color Picker
• Blazor File Upload
• Blazor Range Slider
• Blazor Rating
• Blazor Signature
• Blazor SpeechToText
• Blazor TextArea
• Blazor OTP Input

Blazor TextBox

The Blazor TextBox component is for editing or entering plain text on forms with icons, floating labels, different sizing, grouping, and validation states.

Key features:

• Floating Labels: Animated labels that float above input fields, providing better visual hierarchy and form usability with dynamic placeholder support
• Icons: Add prefix and suffix icons or custom content to input fields for visual indicators and enhanced user experience
• Multiline Text Support: Extend to multiline text areas with auto-expand capability for flexible text input requirements
• Validation States: Built-in validation styling with error messages, success states, and visual feedback for user input errors
• Accessibility: Full keyboard navigation, ARIA labels, and screen reader support for inclusive form interactions

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• API Reference

Blazor MaskedTextBox

The Blazor MaskedTextBox component provides an easy and reliable way to collect user input based on a standard mask for phone numbers, dates, credit card numbers, and more.

Key features:

• Custom Mask Patterns: Define custom mask patterns with flexible formatting rules and character constraints for specialized input requirements
• Automatic Formatting: Real-time formatting and validation as users type, ensuring data consistency and reducing entry errors
• Placeholder Customization: Configure custom placeholder characters and prompt text to guide users through the expected input format
• Keyboard Navigation: Full keyboard support with Tab, arrow keys, and clipboard operations for seamless data entry workflow

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• API Reference

Blazor NumericTextBox

The Blazor NumericTextBox component is a replacement for number-type HTML input with number format support, precision controls, and spin buttons.

Key features:

• Number Formatting: Support for multiple number formats including currency, percentage, exponential, and scientific notation with customizable decimal places
• Precision Control: Configure decimal place precision, rounding behavior, and significant digit handling for accurate numeric calculations
• Min/Max Boundaries: Set upper and lower value limits with automatic enforcement and validation to constrain input values within acceptable ranges
• Spin Buttons: Increment and decrement values using spinner buttons with configurable step intervals for intuitive numeric manipulation
• Locale Support: Automatic locale-specific number formatting with regional settings and currency symbols

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• API Reference

Blazor Color Picker

The Blazor Color Picker component allows picking colors from the container or by adjusting hue and opacity with inline mode and palette customization.

Key features:

• Multiple Picking Modes: Inline color picker, palette mode for predefined colors, and gradient controls for flexible color selection workflows
• Hue and Opacity Adjustment: Interactive gradient and hue sliders with opacity/alpha channel control for precise color customization
• Color Format Support: Convert between RGB, HSL, Hex, and HSVA formats with automatic format detection and real-time value conversion
• Predefined Palettes: Built-in material design and custom color palettes with quick-access buttons for common color selections
• Custom Palette Creation: Create and save user-defined color palettes for brand consistency and streamlined design workflows

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• API Reference

Blazor File Upload

The Blazor File Upload component is for uploading files, images, documents, and multimedia. Features include multiple file selection, progress bars, auto-uploading, drag and drop, and file validation.

Key features:

• Drag and Drop: Intuitive drag-and-drop zone for file uploads with visual feedback and support for dropping multiple files simultaneously
• Multiple File Selection: Select and upload multiple files at once with batch processing capabilities and progress tracking for each file
• File Validation: Validate file types, sizes, and dimensions before upload with customizable error messages and client-side validation
• Progress Tracking: Real-time upload progress bars, percentage indicators, and file status displays for enhanced user feedback
• Chunk Upload: Support for large file uploads through chunk-based transfer with automatic retry logic and resume capabilities

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• API Reference

Blazor Range Slider

The Blazor Range Slider component is a custom range-type input component that allows selecting a value or range between specified min and max values.

Key features:

• Single and Range Modes: Toggle between single value selection and dual-handle range selection for flexible value input scenarios
• Value Boundaries: Set minimum and maximum value limits with automatic enforcement and visual range indicators on the slider track
• Step Intervals: Configure step values for discrete increments, tick marks, and value labels for guided user selection
• Tooltip Display: Show dynamic tooltips with formatted values, custom formatting functions, and positioning options for enhanced UX
• Keyboard Navigation: Full keyboard support with arrow keys, Page Up/Down, Home, and End keys for accessible range selection

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• API Reference

Blazor Rating

The Blazor Rating component provides star ratings with precision modes, labels, tooltips, and UI customization for services, products, and applications.

Key features:

• Precision Modes: Support for full star, half star, and quarter star precision modes for granular rating selection and display capabilities
• Icon Customization: Replace default stars with custom icons, symbols, or images with configurable colors and sizing options
• Value Labels: Display numeric rating values alongside visual stars with customizable label text and formatting for clarity
• Tooltip Support: Show descriptive tooltips on hover with custom text, delays, and positioning for enhanced user guidance
• Readonly Display Mode: Display existing ratings in readonly state for review purposes without allowing user modifications

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• API Reference

Blazor Signature

The Blazor Signature component allows drawing smooth signatures as vector outlines using variable width Bézier curve interpolation with the ability to save signatures as images.

Key features:

• Stroke Customization — Configure stroke color (hex, RGB, named colors), minimum/maximum stroke width, and velocity for realistic thickness variation
• Background Customization — Set custom background color or image; option to include background when saving the signature
• Text-to-Signature — Generate signatures automatically by typing text with selectable font family and size for quick typed signatures
• Save and Export — Export drawn signatures as Base64 strings, Blob, or image formats (PNG, JPEG, SVG) with or without background
• Load/Open Signature — Load pre-existing signatures from Base64 strings or image URLs (supports PNG, JPEG, SVG) for editing or display
• Undo/Redo/Clear — Built-in support for undo, redo operations, and clearing the canvas for easy corrections
• Accessibility Support — Includes keyboard navigation, right-to-left rendering, and industry-standard themes (Material, Bootstrap etc ..)

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• API Reference

Blazor SpeechToText

The Blazor SpeechToText component provides seamless voice-to-text conversion with real-time transcription, multilingual recognition, and customizable buttons and tooltips.

Key features:

• Real-time Transcription - Converts spoken input to text instantly using the Web Speech API, providing smooth and continuous speech-to-text conversion.
• Interim Results Support - Displays live, partial transcriptions as the user speaks for immediate feedback before finalizing the result.
• Listening State Management - Controls and indicates when the component is actively listening, with easy start/stop functionality.
• Multi-language Recognition - Supports multiple languages for accurate transcription in the user's preferred language.
• Customizable UI & Styles - Offers predefined button styles (e.g., Success, Warning), tooltips, and appearance customization for an intuitive microphone interface.

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• API Reference

Blazor TextArea

The Blazor TextArea component is an extended version of the HTML textarea element with floating labels, character counters, readonly state, and validation support for multi-line text input.

Key features:

• Floating Labels — Modern floating label support that elegantly moves placeholder text above the TextArea on focus or when typing begins, keeping context always visible
• Resizable TextArea — Built-in resizing handles allow users to dynamically adjust height, width, or both directions for flexible input sizing
• Customizable Dimensions — Precisely control initial size via rows and columns properties to fit various form layouts and content expectations
• Max Length & Character Counter — Restrict input length with maximum character limits and optional real-time character count display for guided entry
• Form Integration & States — Full support for form validation states (success/error), readonly mode, disabled state, clear button, and styling options like filled/outline appearance

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• API Reference

Blazor OTP Input

The Blazor OTP Input component provides secure one-time password input with automatic focus management, masking options, keyboard navigation, and validation support.

Key features:

• Auto-focus & Auto-advance — Automatically moves focus to the next input field after each digit is entered and jumps back on backspace/delete for smooth, fast OTP entry
• Paste Support — Allows users to paste the complete OTP code at once, automatically filling all input boxes and advancing to the final position
• Input Validation & Masking — Restricts input to numeric digits only, with optional character masking (e.g., • or *) for secure display of OTP values
• Customizable Length & Separator — Supports configurable number of digits (e.g., 4, 6, 8) with optional separators (dashes, spaces) between groups for better readability

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• API Reference

Add stylesheet and script references

• For Blazor Server App / Blazor Web App, add these to Components/App.razor or App.razor file.
• For Blazor WebAssembly App, add these to wwwroot/index.html file.

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Quick start

1. Register the Syncfusion® Blazor services in the Program.cs file.

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

2. Add an input component to your Razor page.

Blazor TextBox

<SfTextBox Placeholder='First Name' FloatLabelType='@FloatLabelType.Auto'></SfTextBox>

Blazor MaskedTextBox

<SfMaskedTextBox Mask='000-000-0000'></SfMaskedTextBox>

Blazor NumericTextBox

<SfNumericTextBox TValue="int?" Value=5 Max=100 Min=1 Step=5></SfNumericTextBox>

Blazor Color Picker

<SfColorPicker></SfColorPicker>

Blazor File Upload

<SfUploader></SfUploader>

Blazor Range Slider

@using Syncfusion.Blazor.Inputs

<SfSlider Value="30"></SfSlider>

Blazor Rating

<SfRating Value="3"></SfRating>

Blazor Signature

<SfSignature></SfSignature>

Blazor SpeechToText

@using Syncfusion.Blazor.Inputs

<div class="speechtext-container">
 <SfSpeechToText @bind-Transcript="@transcript"></SfSpeechToText>
 <SfTextArea RowCount="5" ColumnCount="50" @bind-Value="@transcript" ResizeMode="Resize.None" Placeholder="Transcribed text will be shown here..."></SfTextArea>
</div>

<style>
 .speechtext-container {
 margin: 50px auto;
 gap: 20px;
 display: flex;
 flex-direction: column;
 align-items: center;
 }
</style>

@code {
 string transcript = "";
}

Blazor TextArea

<SfTextArea Placeholder='Add your Comments' FloatLabelType='@FloatLabelType.Auto'></SfTextArea>

Blazor OTP Input

@using Syncfusion.Blazor.Inputs

<SfOtpInput Value="1234" Type="OtpInputType.Number"></SfOtpInput>

Support

• Support portal
• Community forums
• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA.

• Purchase a license
• Start a free 30-day trial

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com.

| Toll Free: 1-888-9-DOTNET