Blazor TextBox Customization—A Complete Guide
Tags: blazor, csharp, dotnet, webdev
Published: 2021-06-16 13:42:57

---
title: Blazor TextBox Customization—A Complete Guide
published: true
date: 2021-06-16 13:05:16 UTC
tags: blazor, csharp, dotnet, webdev
canonical_url: https://www.syncfusion.com/blogs/post/blazor-textbox-customization-a-complete-guide.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Blazor-TextBox-Customization-A-Complete-Guide-672x372.png
---

[Blazor TextBox](https://www.syncfusion.com/blazor-components/blazor-textbox "Link to Blazor TextBox") is a component for editing, displaying, and adding plain text in forms to capture usernames, phone numbers, email addresses, and more. This component is an extended version of the HTML 5 TextBox (input type text) component with icons, floating labels, custom sizing, grouping, validation states, and more. This article explains how to perform customization in the Syncfusion Blazor TextBox. Here, you will learn how to easily create a new custom component using our Blazor TextBox with simple code examples.

## What is a custom component?

Any component created by extending an existing component is a [custom component](https://www.syncfusion.com/faq/blazor/components/how-do-i-create-a-custom-component "Link to create a Custom Control in Blazor"). Using a custom component allows code reusability. Usually, a custom component is created to achieve a new level of functionality and reuse it across an application.

In a Blazor application, a Razor custom component is usually created in a shared or custom folder. Then, the custom component can be used just like other components in the HTML tag.

## Prerequisites

- [Visual Studio 2019](https://visualstudio.microsoft.com/vs/ "Link to Visual Studio 2019")
- [.NET Core 3.0](https://dotnet.microsoft.com/download/dotnet-core/3.0 "Link to .NET Core 3.0") or above
- [Blazor templates](https://docs.microsoft.com/en-us/aspnet/core/blazor/templates?view=aspnetcore-5.0 "Link to Tooling for ASP.NET Core Blazor documentation")

## Steps to create a custom component

### 1. Create a Blazor server application

First, create a Blazor server app and add the required packages by following the steps provided in the [Getting Started with Syncfusion Blazor components](https://blazor.syncfusion.com/documentation/getting-started/server-side-blazor/ "Link to Getting started with Syncfusion Blazor Components in Blazor Server Side App in Visual Studio 2019") documentation.

### 2. Create a custom component Razor page.

Then, create a Razor page under the **Pages** folder and name it **CustomTextbox.razor**.  
 ![Create a Razor page under the Pages folder and name it CustomTextbox](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Create-a-Razor-page-under-the-Pages-folder-and-name-it-CustomTextbox.png)

### 3. Add TextBox and custom properties

Now, add the Blazor TextBox component in the Razor page. By default, the TextBox has the Value, ReadOnly, Placeholder, Width, and [many other](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html "Link to the Class SfTextBox") properties. In addition to these, we are going to add some more custom functionalities such as casing, special characters, spaces, and value types (alphanumeric, numeric, and alphabet only).

Refer to the following code example.

```js
@using Syncfusion.Blazor.DropDowns;
@using Syncfusion.Blazor.Inputs

<SfTextBox @ref="Textbox" ID="@Id" Value="@CustomValue" Readonly="@PreventType" Placeholder="@Placeholder" Width="@Width"></SfTextBox>

@code {

    public SfTextBox Textbox { get; set; }

    [Parameter]
    public CaseType TextCase { get; set; } = CaseType.Normal;

    [Parameter]
    public bool AllowSpaces { get; set; } = true;

    [Parameter]
    public bool AllowSpecialCharacters { get; set; } = true;

    [Parameter]
    public bool PreventType { get; set; }

    [Parameter]
    public CharacterType ValueType { get; set; } = CharacterType.AlphaNumeric;

    [Parameter]
    public string Id { get; set; }

    [Parameter]
    public string CustomValue { get; set; }

    [Parameter]
    public string Placeholder { get; set; }

    [Parameter]
    public string Width { get; set; }

    public enum CaseType
    {
        UpperCase,
        LowerCase,
        Normal
    }

    public enum CharacterType
    {
        AlphaNumeric,
        Numeric,
        Alpha
    }
}
```

### 4. Add event handlers

Now, bind the TextBox events to the new custom component, create variables with EventCallback types, and assign them to the event properties (such as CreatedEvent).

```js
<SfTextBox @ref="Textbox" ID="@Id" Value="@CustomValue" Readonly="@PreventType" Placeholder="@Placeholder" Width="@Width" Created="CreatedEvent" ></SfTextBox>

@code {

    [Parameter]
    public EventCallback CreatedEvent { get; set; }
}
```

### 5. Add the custom component in the Razor page

Now, include the custom TextBox component in the Index.razor page with custom properties. Refer to the following code example.

```html
<CustomTextbox @ref="TextboxInstance" Id="textbox" 
    TextCase="CustomTextbox.CaseType.UpperCase" PreventType="false" AllowSpaces="false" AllowSpecialCharacters="false" ValueType="CustomTextbox.CharacterType.AlphaNumeric" Placeholder="Enter a value" CreatedEvent="OnCreated" Width="200px"></CustomTextbox></div>
```

### 6. Use JSInterop call for script processing

We validate the text using JavaScript, so invoke the JavaScript using [JSInterop](https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0 "Link to Call JavaScript functions from .NET methods in ASP.NET Core Blazor"). First, add the JavaScript file **CustomTextbox.js** in the **script** folder and add a reference to it in the **\_Host.cshtm** file.  
 ![Add the JavaScript file CustomTextbox.js in the script folder](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Add-the-JavaScript-file-CustomTextbox.js-in-the-script-folder.png)

```html
[_Host.cshtm]

<head>
    <link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
    <script src="~/script/CustomTextbox.js"></script>
</head>
```

This script code handles the key down event and validates the text on typing.

```js
var textBoxInstance;
window.validateTextBox = function (elementRef) {
    var element = document.getElementById(elementRef.id);
    textBoxInstance = elementRef;
    element.addEventListener('keydown', function (e) {
        if ((e.keyCode === 8 || e.keyCode === 46 || (e.keyCode >= 37 && e.keyCode <= 40))) {
            return
        }
        if (textBoxInstance.textCase == 0) {
            if (!/[A-Z]/.test(e.key)) {
                e.preventDefault()
                return false
            }
        }
        if (textBoxInstance.textCase == 1) {
            if (!/[a-z]/.test(e.key)) {
                e.preventDefault()
                return false
            }
        }
        if (!textBoxInstance.allowSpaces) {
            if (e.keyCode == 32) {
                e.preventDefault()
                return false
            }
        }
        if (!textBoxInstance.allowSpecialCharacters) {
            if (!/[a-z]|[A-Z]|[0-9]/.test(e.key)) {
                e.preventDefault()
                return false
            }
        }
        if (textBoxInstance.valueType == 1) {
            if (!/[0-9]/.test(e.key)) {
                e.preventDefault()
                return false
            }
        }
        if (textBoxInstance.valueType == 2) {
            if (!/[a-z]|[A-Z]/.test(e.key)) {
                e.preventDefault()
                return false
            }
        }
    }, false);
}
```

After executing the previous code examples, we’ll get output like the following screenshot.

![Blazor TextBox Customization](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Blazor-TextBox-Customization.png)<figcaption>Blazor TextBox Customization</figcaption>

## Resource

For more information, refer to this [Blazor TextBox Customization](https://github.com/SyncfusionExamples/blazor-textbox-customization "Link to Blazor TextBox Customization demo on GitHub") project.

## Conclusion

I hope you now have a clear idea of how to create a custom component to completely customize the [Blazor TextBox](https://www.syncfusion.com/blazor-components/blazor-textbox "Link to Blazor TextBox") component. I encourage you to also explore the [live demo of our Blazor TextBox](https://blazor.syncfusion.com/demos/textbox/default-functionalities?theme=bootstrap4 "Link to Blazor TextBox online demos").

Try our Blazor components by downloading a [free 30-day trial](https://www.syncfusion.com/account/manage-trials/downloads "Link to the free evaluation of the Syncfusion Essential Studio") or by downloading our [NuGet package](https://www.nuget.org/packages/Syncfusion.Blazor "Link to Syncfusion.Blazor NuGet Package"). Feel free to have a look at our [online examples](https://blazor.syncfusion.com/demos/ "Link to Syncfusion Blazor online demos") and [documentation](https://blazor.syncfusion.com/documentation/textbox/getting-started/ "Link to Getting started with Blazor TextBox component documentation") to explore other available features.

If you have any questions, please let us know in the comments section below. You can also contact us through our [support forums](https://www.syncfusion.com/forums/blazor-components "Link to the Syncfusion Blazor support forum") or [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents/newincident "Link to the Syncfusion support system Direct Trac"). We are always happy to assist you!

## Related blogs

- [Exploring Key Features of Blazor MultiSelect Dropdown](https://dev.to/syncfusion/exploring-key-features-of-blazor-multiselect-dropdown-6on "Link to Exploring Key Features of Blazor MultiSelect Dropdown blog")
- [Spice up your Blazor EditForm with Syncfusion Blazor Components](https://www.syncfusion.com/blogs/post/spice-up-your-blazor-editform-with-syncfusion-blazor-components.aspx "Link to Spice up your Blazor EditForm with Syncfusion Blazor Components blog")
- [10 Steps to Replace REST Services with gRPC-Web in Blazor WebAssembly](https://dev.to/syncfusion/10-steps-to-replace-rest-services-with-grpc-web-in-blazor-webassembly-1ckn "Link to 10 Steps to Replace REST Services with gRPC-Web in Blazor WebAssembly blog")
- [Lazy Loading Syncfusion Blazor Assemblies in a Blazor WebAssembly Application](https://dev.to/syncfusion/lazy-loading-syncfusion-blazor-assemblies-in-a-blazor-webassembly-application-444e "Link to Lazy Loading Syncfusion Blazor Assemblies in a Blazor WebAssembly Application blog")