From 9ef269ed664d0805342a1e41cf3ebc7c31003139 Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Mon, 13 Oct 2025 18:20:25 +0530 Subject: [PATCH] 983104: Updated the UG Documentation for RangeSlider --- blazor/otp-input/accessibility.md | 35 +++++++++++----------- blazor/otp-input/appearance.md | 12 ++++---- blazor/otp-input/events.md | 14 ++++----- blazor/otp-input/getting-started-webapp.md | 30 +++++++++---------- blazor/otp-input/getting-started.md | 24 +++++++-------- blazor/otp-input/input-types.md | 18 +++++------ blazor/otp-input/placeholder.md | 6 ++-- blazor/otp-input/separator.md | 2 +- blazor/otp-input/styling-modes.md | 14 ++++----- 9 files changed, 78 insertions(+), 77 deletions(-) diff --git a/blazor/otp-input/accessibility.md b/blazor/otp-input/accessibility.md index 16dceb7b11..52bae20410 100644 --- a/blazor/otp-input/accessibility.md +++ b/blazor/otp-input/accessibility.md @@ -9,19 +9,19 @@ documentation: ug # Accessibility in Blazor OTP Input component -The Blazor OTP Input component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Blazor OTP Input component follows established accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. The accessibility compliance for the Blazor OTP Input component is outlined below. | Accessibility Criteria | Compatibility | | -- | -- | -| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Yes | -| [Section 508 Support](../common/accessibility#accessibility-standards) | Yes | -| [Screen Reader Support](../common/accessibility#screen-reader-support) | Yes | -| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Yes | -| [Color Contrast](../common/accessibility#color-contrast) | Yes | -| [Mobile Device Support](../common/accessibility#mobile-device-support) | Yes | -| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Yes | +| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Supported | +| [Section 508 Support](../common/accessibility#accessibility-standards) | Supported | +| [Screen Reader Support](../common/accessibility#screen-reader-support) | Supported | +| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Supported | +| [Color Contrast](../common/accessibility#color-contrast) | Supported | +| [Mobile Device Support](../common/accessibility#mobile-device-support) | Supported | +| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Supported | -
Yes - All features of the component meet the requirement.
+
Supported - All features of the component meet the requirement.
-
Intermediate - Some features of the component do not meet the requirement.
+
Partially supported - Some features of the component do not fully meet the requirement.
-
No - The component does not meet the requirement.
+
Not supported - The component does not meet the requirement.
## WAI-ARIA attributes @@ -41,8 +41,8 @@ The following ARIA attributes are used in the OTP Input component: | Attributes | Purpose | | ------------ | ----------------------- | -| `role=group` | Attributes used to form a collection of items.| -| `aria-label` | Attributes provides the text label for the OTP Inputs. | +| `role=group` | Applied to the container to group the OTP input fields. | +| `aria-label` | Provides a text label for the OTP input fields for assistive technologies. | ## Keyboard interaction @@ -51,7 +51,7 @@ The following keyboard shortcuts are supported by the OTP Input component. | Windows | Mac | Actions | | --- | --- | --- | | ← | ← | Focuses the previous input in the OTP. | -| → | → | Focuses the next input in OTP | +| → | → | Focuses the next input in the OTP. | | Tab | Tab | Moves the initial focus and shifts focus to the next input of the OTP. | | Shift + Tab | ⇧ + Tab | Moves the focus to the previous input of the OTP. | @@ -61,7 +61,7 @@ The following keyboard shortcuts are supported by the OTP Input component. ## HtmlAttributes -HtmlAttributes allow you to specify additional HTML attributes to be applied to the OTP input component. +HtmlAttributes allow specifying additional HTML attributes to be applied to the OTP input component for improved semantics and accessibility. You can pass HTML attributes as key-value pairs to the [HtmlAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_HtmlAttributes) property. @@ -82,8 +82,9 @@ You can pass HTML attributes as key-value pairs to the [HtmlAttributes](https:// ## AriaLabels -AriaLabels define the ARIA-label attribute for each input field in the OTP input component. ARIA-labels enhance accessibility by providing descriptive labels for screen reader users, improving the user experience for individuals with disabilities. -You can provide an array of strings as ARIA-labels to the [AriaLabels](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_AriaLabels) property. Each string corresponds to the ARIA-label attribute for the respective input field in the OTP input component. +AriaLabels define the aria-label attribute for each input field in the OTP input component. aria-label values enhance accessibility by providing descriptive labels for screen reader users. + +You can provide an array of strings as aria-label values to the [AriaLabels](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_AriaLabels) property. Each string corresponds to the aria-label attribute for the respective input field in the OTP input component. ```cshtml diff --git a/blazor/otp-input/appearance.md b/blazor/otp-input/appearance.md index f160f1d064..b523000f1f 100644 --- a/blazor/otp-input/appearance.md +++ b/blazor/otp-input/appearance.md @@ -9,11 +9,11 @@ documentation: ug # Appearance in Blazor OTP Input component -You can also customize the appearance of OTP Input component. +Customize the appearance of the OTP input component, including input length, disabled state, and visual styles. ## Setting input length -You can specify the length of OTP by using the [Length](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Length) property. The default value is `4`. +Specify the length of the OTP by using the [Length](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Length) property. The default value is `4`. This value determines the number of input fields rendered for the OTP. ```cshtml @@ -27,7 +27,7 @@ You can specify the length of OTP by using the [Length](https://help.syncfusion. ## Disable inputs -You can disable the OTP Input component by using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Disabled) property. By default the value is `false`. +Disable the OTP Input component by using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Disabled) property. By default, the value is `false`. When disabled, the input fields are non-interactive and display the disabled visual style. ```cshtml @@ -41,9 +41,9 @@ You can disable the OTP Input component by using the [Disabled](https://help.syn ## CssClass -You can customize the appearance of the OTP Input component, such as by changing its colors, fonts, sizes or other visual aspects by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_CssClass) property. +Customize the appearance of the OTP Input component by changing colors, fonts, sizes, and other visual aspects by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_CssClass) property. -The OTP input component supports the following predefined styles that can be defined using the `CssClass` property. You can customize by replacing the `CssClass` property with the below defined class names. +The OTP input component supports the following predefined styles that can be applied using the `CssClass` property. Replace the `CssClass` value with one of the following class names to apply the corresponding style. | cssClass | Description | | -------- | -------- | @@ -59,4 +59,4 @@ The OTP input component supports the following predefined styles that can be def ``` -![Blazor OTP Input Component with CssClass](images/blazor-otp-success.png) +![Blazor OTP Input Component with CssClass](images/blazor-otp-success.png) \ No newline at end of file diff --git a/blazor/otp-input/events.md b/blazor/otp-input/events.md index 0540ad1336..df765a3a24 100644 --- a/blazor/otp-input/events.md +++ b/blazor/otp-input/events.md @@ -9,11 +9,11 @@ documentation: ug # Events in Blazor OTP Input component -This section describes the OTP Input events that will be triggered when appropriate actions are performed. The following events are available in the OTP Input component. +This section describes the OTP Input events triggered by user interaction and component lifecycle. The following events are available in the OTP Input component. ## Created -The OTP Input component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Created) event when the component rendering is completed. +The OTP Input component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Created) event when component rendering is completed. ```cshtml @@ -30,9 +30,9 @@ The OTP Input component triggers the [Created](https://help.syncfusion.com/cr/bl ``` -## OnFocus +## OnFocus -The OTP Input component triggers the [OnFocus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_OnFocus) event when the OTP Input is focused. The [OtpFocusInEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpFocusInEventArgs.html) passed as an event argument provides the details of the focus event. +The OTP Input component triggers the [OnFocus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_OnFocus) event when an OTP input field receives focus. The [OtpFocusInEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpFocusInEventArgs.html) event argument provides details about the focus-in action, such as the focused input. ```cshtml @@ -51,7 +51,7 @@ The OTP Input component triggers the [OnFocus](https://help.syncfusion.com/cr/bl ## OnBlur -The OTP Input component triggers the [OnBlur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_OnBlur) event when the OTP Input is focused out. The [OtpFocusOutEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpFocusOutEventArgs.html) passed as an event argument provides the details of the blur event. +The OTP Input component triggers the [OnBlur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_OnBlur) event when focus leaves an OTP input field or the component. The [OtpFocusOutEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpFocusOutEventArgs.html) event argument provides details about the blur action, such as the input that lost focus. ```cshtml @@ -70,7 +70,7 @@ The OTP Input component triggers the [OnBlur](https://help.syncfusion.com/cr/bla ## OnInput -The OTP Input component triggers the [OnInput](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_OnInput) event when the value of each OTP Input is changed. The [OtpInputEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputEventArgs.html) passed as an event argument provides the details of the each value is changed. +The OTP Input component triggers the [OnInput](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_OnInput) event when the value of an individual OTP input field changes. The [OtpInputEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputEventArgs.html) event argument provides details about the change, such as the input index and the current value. ```cshtml @@ -85,4 +85,4 @@ The OTP Input component triggers the [OnInput](https://help.syncfusion.com/cr/bl } } -``` +``` \ No newline at end of file diff --git a/blazor/otp-input/getting-started-webapp.md b/blazor/otp-input/getting-started-webapp.md index 3c0da87c7e..c61ac02231 100644 --- a/blazor/otp-input/getting-started-webapp.md +++ b/blazor/otp-input/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor OTP Input in Blazor Web App -This section briefly explains about how to include `Blazor OTP Input` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This guide explains how to add the`Blazor OTP Input` component to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. To get started quickly with Blazor OTP Input component, check on the following video: @@ -26,17 +26,17 @@ To get started quickly with Blazor OTP Input component, check on the following v ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the Blazor Web App. ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add **Blazor OTP Input** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the Blazor OTP Input component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +Use `WebAssembly or Auto` render modes in the Blazor Web App need to be install the Syncfusion® Blazor components NuGet packages within the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -47,7 +47,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in NuGet at [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the complete package list and component details. {% endtabcontent %} @@ -59,9 +59,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft t](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -79,11 +79,11 @@ N> For more information on creating a **Blazor Web App** with various interactiv ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +Use `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install the Syncfusion® Blazor components NuGet packages within the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the terminal is in the project directory that contains the `.csproj` file. +* Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and restore dependencies. {% tabs %} @@ -97,7 +97,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in NuGet at [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the complete package list and component details. {% endtabcontent %} @@ -108,9 +108,9 @@ N> Syncfusion® Blazor components are availa | Interactive Render Mode | Description | | -- | -- | | WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| Server | Open **~/_Imports.razor** file, which is located in the `Components` folder.| -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace . +Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} diff --git a/blazor/otp-input/getting-started.md b/blazor/otp-input/getting-started.md index 7604287223..2397590513 100644 --- a/blazor/otp-input/getting-started.md +++ b/blazor/otp-input/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor OTP Input component -This section briefly explains about how to include `Blazor OTP Input` component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This guide explains how to add the `Blazor OTP Input` component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code. {% tabcontents %} @@ -21,11 +21,11 @@ This section briefly explains about how to include `Blazor OTP Input` component ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App -To add **Blazor OTP Input** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add **Blazor OTP Input** component in the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -36,7 +36,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the complete package list and component details. {% endtabcontent %} @@ -48,9 +48,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following commands in the terminal (Ctrl+`). {% tabs %} @@ -66,8 +66,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Inputs and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the terminal is in the project root directory where the `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies. {% tabs %} @@ -81,7 +81,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the complete package list and component details. {% endtabcontent %} @@ -89,7 +89,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -133,11 +133,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover available methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes. See [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for approaches to adding script references. The script reference is required for component interactivity. ## Add Syncfusion® Blazor OTP Input component -Add the Syncfusion® Blazor OTP Input component in the **~/Pages/Index.razor** file. +Add the Syncfusion Blazor OTP Input component to the **~/Pages/Index.razor** file. {% tabs %} {% highlight razor %} diff --git a/blazor/otp-input/input-types.md b/blazor/otp-input/input-types.md index f2bc7ae5a0..2ff3114152 100644 --- a/blazor/otp-input/input-types.md +++ b/blazor/otp-input/input-types.md @@ -11,11 +11,11 @@ documentation: ug ## Types -This section explains the the various types of OTP (One-Time Password) input component, explaining their default behaviors and appropriate use cases. +This section explains the available types of the OTP (one-time password) input component, their default behaviors, and appropriate use cases. ### Number type -You can set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Type) property to [Number](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputType.html#Syncfusion_Blazor_Inputs_OtpInputType_Number) to use this input type as number. This is ideal for OTP input scenarios with numeric-only codes. By default `Type` property is `Number`. +Set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Type) property to [Number](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputType.html#Syncfusion_Blazor_Inputs_OtpInputType_Number) to accept only numeric characters. This is ideal for OTP scenarios with digit-only codes. The default `Type` is `Number`. ```cshtml @@ -25,11 +25,11 @@ You can set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.I ``` -![Blazor OTP Input Component with Number Type](images/blazor-otp-number.png) +![Blazor OTP input component with number type](images/blazor-otp-number.png) ### Text type -You can set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Type) property to [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputType.html#Syncfusion_Blazor_Inputs_OtpInputType_Text) to use this input type as text. This is suitable when the OTP input need to include both letters and numbers. +Set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Type) property to [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputType.html#Syncfusion_Blazor_Inputs_OtpInputType_Text) to allow alphanumeric input. Use this when the OTP may include both letters and numbers. ```cshtml @@ -39,11 +39,11 @@ You can set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.I ``` -![Blazor OTP Input Component with Text Type](images/blazor-otp-text.png) +![Blazor OTP input component with text type](images/blazor-otp-text.png) ### Password type -You can set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Type) property to [Password](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputType.html#Syncfusion_Blazor_Inputs_OtpInputType_Password) to use this input type as password in the OTP Input. +Set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Type) property to [Password](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputType.html#Syncfusion_Blazor_Inputs_OtpInputType_Password) to mask entered characters for privacy while typing. The underlying value remains the same; only the display is obscured. ```cshtml @@ -53,11 +53,11 @@ You can set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.I ``` -![Blazor OTP Input Component with Password Type](images/blazor-otp-password.png) +![Blazor OTP input component with password type](images/blazor-otp-password.png) ## Value -You can specify the value of OTP Input by using the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Value) property. +Specify the initial OTP value by using the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Value) property. ```cshtml @@ -67,4 +67,4 @@ You can specify the value of OTP Input by using the [Value](https://help.syncfus ``` -![Blazor OTP Input Component with Value](images/blazor-otp-number.png) +![Blazor OTP input component with value](images/blazor-otp-number.png) \ No newline at end of file diff --git a/blazor/otp-input/placeholder.md b/blazor/otp-input/placeholder.md index 2edc23c6c0..31e23cac2d 100644 --- a/blazor/otp-input/placeholder.md +++ b/blazor/otp-input/placeholder.md @@ -11,7 +11,7 @@ documentation: ug The placeholder in OTP Input specifies the text that is shown as a hint or placeholder until the user enters a value in the input field. It acts as a guidance for the users regarding the expected input format or purpose of the input field. -You can set the placeholder text by using the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Placeholder) property. Additionally, when providing a single character as the placeholder value all input fields within the OTP Input component will display the same character. +Set the placeholder text by using the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Placeholder) property. When a single character is provided, all input fields display the same character. ```cshtml @@ -23,7 +23,7 @@ You can set the placeholder text by using the [Placeholder](https://help.syncfus ![Blazor OTP Input Component with Placeholder](images/blazor-otp-char.png) -When a placeholder with multiple placeholder characters is provided each input field will display characters from the placeholder string in sequence based on the available OTP Input length. +When a placeholder string with multiple characters is provided, characters are assigned to input fields from left to right up to the configured OTP length. If the placeholder string contains more characters than the OTP length, extra characters are ignored; if it contains fewer, only those positions display placeholder characters. ```cshtml @@ -33,4 +33,4 @@ When a placeholder with multiple placeholder characters is provided each input f ``` -![Blazor OTP Input Component with Placeholder as string](images/blazor-otp-string.png) +![Blazor OTP input component with placeholder as string](images/blazor-otp-string.png) \ No newline at end of file diff --git a/blazor/otp-input/separator.md b/blazor/otp-input/separator.md index 7270116dd3..8a2ff15258 100644 --- a/blazor/otp-input/separator.md +++ b/blazor/otp-input/separator.md @@ -9,7 +9,7 @@ documentation: ug # Separator in Blazor OTP Input component -The separator in OTP Input specifies the character or symbol used to separate each input field in the OTP Input component. This separator is displayed between each input field to visually distinguish between each inputs. You can set the separator character by using the [Separator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Separator) property. +The separator in the OTP input component is the character or string rendered between adjacent input fields to visually distinguish them. Configure the separator using the [Separator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Separator) property. ```cshtml diff --git a/blazor/otp-input/styling-modes.md b/blazor/otp-input/styling-modes.md index 9921e17dda..d6b7e23061 100644 --- a/blazor/otp-input/styling-modes.md +++ b/blazor/otp-input/styling-modes.md @@ -9,11 +9,11 @@ documentation: ug # Styling Modes in Blazor OTP Input component -Styling modes specify the style variants for the input fields in the OTP Input component. These modes allows you to customize the appearance of the OTP Input fields. +Styling modes specify the visual variants for the input fields in the OTP input component. These modes allow customization of the inputs’ appearance to match application design. ## Outline mode -You can use the outline style by setting the [StylingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_StylingMode) property to [Outlined](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputStyle.html#Syncfusion_Blazor_Inputs_OtpInputStyle_Outlined). The default styling mode is `Outlined`. +Use the outline style by setting the [StylingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_StylingMode) property to [Outlined](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputStyle.html#Syncfusion_Blazor_Inputs_OtpInputStyle_Outlined). The default styling mode is `Outlined`. ```cshtml @@ -23,11 +23,11 @@ You can use the outline style by setting the [StylingMode](https://help.syncfusi ``` -![Blazor OTP Input Component with Outline Mode](images/blazor-otp-outlined.png) +![Blazor OTP input component with outlined mode](images/blazor-otp-outlined.png) ## Filled mode -You can use the filled style by setting the [StylingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_StylingMode) property to [Filled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputStyle.html#Syncfusion_Blazor_Inputs_OtpInputStyle_Filled). +Use the filled style by setting the [StylingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_StylingMode) property to [Filled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputStyle.html#Syncfusion_Blazor_Inputs_OtpInputStyle_Filled). ```cshtml @@ -37,11 +37,11 @@ You can use the filled style by setting the [StylingMode](https://help.syncfusio ``` -![Blazor OTP Input Component with Filled Mode](images/blazor-otp-filled.png) +![Blazor OTP input component with filled mode](images/blazor-otp-filled.png) ## Underline mode -You can use the underline style by setting the [StylingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_StylingMode) property to [Underlined](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputStyle.html#Syncfusion_Blazor_Inputs_OtpInputStyle_Underlined). +Use the underline style by setting the [StylingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_StylingMode) property to [Underlined](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputStyle.html#Syncfusion_Blazor_Inputs_OtpInputStyle_Underlined). ```cshtml @@ -51,4 +51,4 @@ You can use the underline style by setting the [StylingMode](https://help.syncfu ``` -![Blazor OTP Input Component with Underlined Mode](images/blazor-otp-underlined.png) +![Blazor OTP input component with underlined mode](images/blazor-otp-underlined.png) \ No newline at end of file