Syncfusion Toolkit for Blazor - v1.0.1 Release Notes

📦 v1.0.1📅 June 26, 2026

New Components

This release delivers new features across the Syncfusion Blazor Toolkit. Version 1.0.1 expands component capabilities with improved performance, accessibility refinements, and new customization options. The 16 production-ready components have been enhanced based on user feedback to provide a more robust and developer-friendly experience.

Button

The Blazor Toolkit Button component used for triggering actions in web apps. Supports different looks, icons, and toggle states.

  • Multiple Visual Styles - Choose from Default, Outline, Flat, or Round buttons with color options like Info, Success, Warning, and Danger.
  • Icon Placement - Add icons on the left, right, top, or bottom of button text using the IconCss property.
  • Toggle State - Turn buttons into switches that stay on or off until clicked again, great for settings and bookmarks.
  • Form Support - Works with Blazor forms for submit and reset actions with built-in validation.

ButtonGroup

The Blazor Toolkit ButtonGroup component is a container component that groups multiple buttons together with support for single and multiple selection modes.

  • Selection Modes - Allows single (radio-like) or multiple (checkbox-like) button selection within the group for toolbars and filter interfaces.
  • Vertical Layout - Arranges buttons in a vertical stack when IsVertical is set to true, ideal for sidebars and tool panels.
  • Icon Support - Adds icons to buttons using IconCss property with flexible positioning (left, right, top, bottom) around button text.
  • Form Integration - Uses Name and Value properties to submit selected button data in forms, making it work seamlessly with Blazor's form validation.

Calendar

The Blazor Toolkit Calendar component used for displaying and selecting dates with support for multiple views, multi-selection, and international calendar systems.

  • Multi-Date Selection - Allows selecting multiple non-consecutive dates at once, ideal for scheduling and event planning.
  • Islamic Calendar Support - Switches to Hijri calendar system using CalendarMode property for Arabic and Islamic applications.
  • Week Number Display - Shows week numbers alongside dates with configurable first week rule for business reporting needs.
  • Date Range Restriction - Limits selectable dates using Min and Max properties, perfect for booking systems and form validation.

DatePicker

The Blazor Toolkit DatePicker component combines a text input with an embedded calendar popup for intuitive date selection.

  • Input Mask Support - Guides date entry with a specific format pattern, preventing invalid date inputs and showing placeholders for each segment.
  • Multiple Input Formats - Accepts various date format patterns when typing dates manually, with support for culture-specific formats like ISO and Gregorian.
  • Date Range Restriction - Limits selectable dates using Min and Max properties, with out-of-range dates disabled in the popup.
  • Floating Label - Placeholder text floats above the input when focused or filled, providing a clean interface that saves vertical space.

DateTimePicker

The Blazor Toolkit DateTimePicker component enables selection of both date and time values in a unified interface with configurable formats and time intervals.

  • Time Interval Configuration - Set time intervals (e.g., 15, 30, 60 minutes) to control the granularity of time selection in the dropdown list.
  • Time Range Restriction - Separate MinTime and MaxTime properties restrict time selection independent of date constraints, perfect for business hours.
  • Date and Time Format - Customize display using standard .NET format patterns like "dd/MM/yyyy hh:mm:ss" with culture-specific support.
  • Mask Input Support - Guides datetime entry with a mask pattern based on the Format property, showing placeholders for each segment.

TimePicker

The Blazor Toolkit TimePicker component provides specialized time-only selection with configurable intervals, format options, and validation for precise time entry.

  • Flexible Time Intervals - Configure the Step property (e.g., 15, 30, 60 minutes) to control the granularity of time options displayed in the popup list.
  • Time Range Restriction - Set Min and Max time values to restrict selectable times within a specific range, with out-of-range times automatically disabled.
  • 12/24 Hour Formats - Support for both 12-hour format with AM/PM (h:mm tt) and 24-hour format (HH:mm), plus optional seconds display.
  • Mask Input Support - Enable the EnableMask property to guide time entry with format placeholders, preventing invalid input and showing segment indicators.

Chart

The Chart component provides feature-rich data visualization with multiple chart types and interactive capabilities.

  • New Chart Types - Added support for a wide range of chart types including Area, Bar, Bubble, Column, Line, Scatter, Spline (with Area), Multicolored (Area and Line), Step (Line and Area), and stacking variants with 100% options to support diverse visualization needs.
  • Indicators and Trendlines - Supports rendering of technical indicators and trendlines to help identify patterns, trends, and analytical insights directly within the chart.
  • Annotations and Data Labels - Enables annotations and data labels to highlight specific data points and provide contextual information for better understanding.
  • Zooming and Panning - Allows smooth zooming and panning to explore data efficiently across different ranges and scales.
  • Selection and Highlight - Provides interactive selection and highlighting to focus on specific data segments for detailed analysis.
  • Crosshair - Displays crosshair lines for precise tracking of values across both axes.
  • Tooltip - Shows enhanced tooltips with detailed data information when hovering over chart elements.
  • Legend with Toggle Support - Allows users to dynamically show or hide series using interactive legend toggle functionality.
  • Gradient Support - Supports gradient fills for series, indicators, and trendlines to improve visual appearance.
  • Strip Lines - Highlights specific ranges or threshold areas within the chart using configurable strip lines.
  • Markers - Enables customizable markers to emphasize individual data points clearly.
  • Multiple Axis - Supports multiple axes to represent different data scales within a single chart.
  • Multiple Panes - Allows rendering of multiple panes to organize related datasets into separate sections within the same chart.

CheckBox

The Blazor Toolkit CheckBox component enables users to make binary or tri-state selections with support for labels, custom styling, and form integration.

  • Tri-State Mode - Supports checked, unchecked, and indeterminate states via EnableTriState property, ideal for "Select All" scenarios in hierarchical lists.
  • Label Positioning - Flexible label placement using LabelPosition property (Before or After), adapting to RTL layouts automatically.
  • Theme Colors - Built-in color classes like e-primary, e-success, e-warning, and e-danger for matching application themes.
  • Form Validation - Seamless integration with Blazor's EditForm and DataAnnotations for model-based validation scenarios.

NumericTextBox

The Blazor Toolkit NumericTextBox component provides numeric input with formatting, validation, and spin button controls for precise number entry.

  • Currency Formatting - Display values with currency symbols using Format="C2" and culture-specific decimal separators.
  • Percentage Display - Format values as percentages using Format="P2" with automatic decimal conversion between display and raw values.
  • Custom Format Patterns - Use # and 0 placeholders to create custom display patterns like "###.##" for optional decimals or "000.00" for zero-padded values.
  • Strict Mode - Automatically constrains values between Min and Max bounds, correcting out-of-range inputs on blur.

RadioButton

The Blazor Toolkit RadioButton component enables users to select a single option from a group of mutually exclusive choices with label and styling support.

  • Label Positioning - Place labels before or after the radio button using LabelPosition property, with automatic RTL layout adaptation.
  • Disabled State - Prevent interaction on individual radio buttons using the Disabled property while retaining visual presence.
  • Theme Colors - Apply built-in color classes like e-success, e-info, e-warning, and e-danger to match application themes.
  • Form Validation - Seamless integration with Blazor's EditForm and DataAnnotations for model binding and validation scenarios.

Switch

The Blazor Toolkit Switch component provides a toggle control for boolean state selection with customizable on/off labels and seamless form integration.

  • On/Off State Labels - Display text inside the switch for ON and OFF states using OnLabel and OffLabel properties, improving user understanding of current state.
  • Disabled State - Prevent user interaction using the Disabled property while maintaining visual presence, ideal for conditional form fields.
  • Form Validation - Seamless integration with Blazor's EditForm and DataAnnotations for model-based validation scenarios.

TextArea

The Blazor Toolkit TextArea component provides multi-line text input with configurable rows, columns, and resize behavior for flexible text entry.

  • Resize Mode - Control resize direction using ResizeMode property (None, Horizontal, Vertical, Both) to limit or allow user resizing.
  • Row and Column Count - Set visible dimensions using RowCount (lines) and ColumnCount (character width) properties for appropriate input sizing.
  • Float Label Types - Support for floating labels using FloatLabelType property (Never, Auto, Always) with placeholder text behavior.
  • Maximum Length - Enforce character limits using MaxLength property, preventing input beyond specified limit.

TextBox

The Blazor Toolkit TextBox component provides comprehensive text input with support for multiple input types, multiline mode, and customizable autocomplete behavior.

  • Input Types - Configure input behavior using Type property (Text, Password, Email, Number, Tel, URL, Search) for appropriate keyboards and validation.
  • Multiline Mode - Enable multiline textarea input using Multiline property for capturing longer text like comments and descriptions.
  • Autocomplete - Control browser autocomplete suggestions using Autocomplete property (On/Off) for sensitive fields like passwords.
  • Clear Button - ShowClearButton property displays a clear button when typing, allowing one-click content clearing.

Uploader

The Blazor Toolkit Uploader component provides file upload with drag-and-drop, progress tracking, and validation for reliable file transfers.

  • Chunk Upload - Upload large files by splitting them into smaller chunks using OnChunkUploadStart, OnChunkSuccess, and OnChunkFailure events for reliable uploads.
  • File Validation - Restrict file types using AllowedExtensions property and validate size using MaxFileSize and MinFileSize properties.
  • Directory Upload - Enable DirectoryUpload property to allow uploading entire folders instead of individual files.
  • Sequential Upload - Enable SequentialUpload property to upload multiple files one after another instead of simultaneously.
  • Auto Upload - AutoUpload property automatically uploads files immediately after selection without requiring manual trigger.

Dialog

The Blazor Toolkit Dialog component provides modal and non-modal overlay dialogs with drag, resize, and positioning support for versatile popup interactions.

  • Modal Dialog - IsModal property creates an overlay that blocks interaction with the rest of the application until the dialog is closed.
  • Drag Support - AllowDragging property enables dragging the dialog by its header to reposition within the viewport.
  • Resize Support - EnableResize property with ResizeHandles allows resizing dialog in specific directions like SouthEast, NorthEast, or All.
  • Custom Positioning - DialogPositionData property allows positioning dialog at specific X and Y coordinates within a target container.
  • Template Support - DialogTemplates component allows customization of Header, Content, and Footer areas with custom layouts.

Tooltip

The Blazor Toolkit Tooltip component displays contextual information on hover, click, or focus with customizable positioning, animation, and content support.

  • Animation Effects - Animation property with Effect enum (FadeIn, FadeOut, ZoomIn, ZoomOut) controls smooth open and close transitions.
  • Mouse Trail - MouseTrail property enables tooltip to follow cursor movement within the target element for dynamic content tracking.
  • Sticky Mode - IsSticky property keeps tooltip displayed until manually closed by the user, ideal for persistent help content.
  • Open Mode Control - OpensOn property allows triggering tooltip on specific events - Auto, Hover, Click, Focus, or Custom.

Spinner

The Blazor Toolkit Spinner component provides circular loading indicators with customizable size, thickness, labels, and overlay support for seamless integration.

  • Size Property - Size property allows customizing spinner dimensions with pixel or percentage values for consistent visual scaling.
  • Thickness Property - Thickness property controls the stroke width of the spinner animation, allowing visual prominence adjustment.
  • Label Property - Label property displays descriptive text below the spinner animation to communicate what is being loaded.
  • Custom Templates - SpinnerTemplates component enables creating custom loading elements with CSS or SVG for brand-specific animations.
  • Overlay Mode - Adding e-spin-overlay class via CssClass property creates a modal overlay that blocks interaction during loading.

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please retry or reload the page.