Syncfusion.Blazor.Inputs 33.1.44

Prefix Reserved
.NET 8.0 This package targets .NET 8.0. The package is compatible with this framework or higher. 
dotnet add package Syncfusion.Blazor.Inputs --version 33.1.44
                    


                    

                
NuGet\Install-Package Syncfusion.Blazor.Inputs -Version 33.1.44
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="Syncfusion.Blazor.Inputs" Version="33.1.44" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="Syncfusion.Blazor.Inputs" Version="33.1.44" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="Syncfusion.Blazor.Inputs" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add Syncfusion.Blazor.Inputs --version 33.1.44
                    


                    

                
#r "nuget: Syncfusion.Blazor.Inputs, 33.1.44"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package Syncfusion.Blazor.Inputs@33.1.44
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=Syncfusion.Blazor.Inputs&version=33.1.44
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=Syncfusion.Blazor.Inputs&version=33.1.44
                    


                            Install as a Cake Tool

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

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

System Requirements

  • .NET 8.0 or later (Blazor Web App, Blazor Server, Blazor WebAssembly, and Blazor Hybrid)
  • See full requirements: System Requirements

Installation

.NET CLI

dotnet add package Syncfusion.Blazor.Inputs

NuGet Package Manager

Install-Package Syncfusion.Blazor.Inputs

Add stylesheet and script references

  • For Blazor Server App / Blazor Web App, add these to Components/App.razor or App.razor.
  • For Blazor WebAssembly App: add these to wwwroot/index.html.
<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

Register Syncfusion® Blazor services in Program.cs:

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

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

License

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

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.

sales@syncfusion.com | Toll Free: 1-888-9-DOTNET

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net9.0 is compatible.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (33)

Showing the top 5 NuGet packages that depend on Syncfusion.Blazor.Inputs:

Package Downloads
Syncfusion.Blazor.DropDowns

Provides Syncfusion® Blazor dropdown and selection components including AutoComplete, ComboBox, DropDownList, ListBox, and MultiSelect controls. Supports data binding, filtering, grouping, cascading, templates, and accessibility features for building robust selection interfaces.
Syncfusion.Blazor.Navigations

Syncfusion® Provides Blazor navigation and menu components for building interactive navigation structures. Includes Accordion, Sidebar, Tabs, Menu Bar, Context Menu, Toolbar, and Tree View with support for keyboard navigation, accessibility features, and customizable templates.
Syncfusion.Blazor.Calendars

Provides Syncfusion® Blazor calendar and date/time picker components for building date selection interfaces. Includes Calendar, DatePicker, DateRangePicker, DateTimePicker, and TimePicker with support for localization, custom formatting, and date range validation.
Syncfusion.Blazor.Grid

Syncfusion® Blazor DataGrid component for rendering high-performance, feature-rich tabular UI in .NET Blazor applications. Includes virtualization, paging, sorting, filtering, grouping, editing, templates, and export (Excel/PDF).
Syncfusion.Blazor.RichTextEditor

Syncfusion® Blazor Rich Text Editor component for composing and formatting HTML content in .NET Blazor apps. Supports toolbar, markdown, paste cleanup, formats, and extensible plugins.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
33.1.44 6 3/16/2026
32.2.9 3,970 3/9/2026
32.2.8 6,849 3/2/2026
32.2.7 8,637 2/23/2026
32.2.5 7,076 2/16/2026
32.2.4 7,660 2/10/2026
32.2.3 9,490 2/5/2026
32.1.25 12,586 1/26/2026
32.1.24 9,335 1/19/2026
32.1.23 13,282 1/13/2026
32.1.22 8,772 1/5/2026
32.1.21 8,044 12/29/2025
32.1.20 4,671 12/23/2025
32.1.19 14,940 12/16/2025
31.2.18 14,363 12/8/2025
31.2.16 14,612 12/1/2025
31.2.15 11,027 11/25/2025
31.2.12 12,750 11/18/2025
31.2.10 5,959 11/12/2025
31.2.5 12,302 11/3/2025
Loading failed

https://blazor.syncfusion.com/documentation/release-notes/33.1.44/?utm_source=nuget&utm_medium=listing