# Getting Started with the TextBox

This tutorial explains how to set up a basic Telerik UI for ASP.NET Core TextBox and highlights the major steps in the configuration of the component.

You will initialize a TextBox component with a placeholder text and a label. Next, you will learn how to handle the `Change` event of the component and update and access its value at runtime. Finally, you can run the sample code in [Telerik REPL](https://netcorerepl.telerik.com/) and continue exploring the components.

![Sample Telerik UI for ASP.NET Core TextBox](https://www.telerik.com/aspnet-core-ui/documentation/assets/296f041c0e8037502a77e7d6dd97b49f/textbox-getting-started.png)

## Prerequisites

To successfully complete the tutorial, you need a project that is already configured to use the Telerik UI for ASP.NET Core components:

* You can use the [Telerik REPL](https://netcorerepl.telerik.com/) playground and skip installing the components on your system and configuring a project.

* You can prepare a Visual Studio project by following the following guide:

  * Creating a new pre-configured project for the Telerik UI for ASP.NET Core components from [a project template](https://www.telerik.com/aspnet-core-ui/documentation/vs-integration/new-project-wizard).

## 1. Prepare the CSHTML File

The first step is to add the required directives at the top of the `.cshtml` document:

* To use the Telerik UI for ASP.NET Core HtmlHelpers:

  ```cshtml
  @using Kendo.Mvc.UI
  ```

* To use the Telerik UI for ASP.NET Core TagHelpers:

  ```cshtml
  @addTagHelper *, Kendo.Mvc
  ```

Optionally, you can structure the document by adding the desired HTML elements like headings, divs, paragraphs, and others.

```Razor HtmlHelper
    @using Kendo.Mvc.UI

    <h4>TextBox with a Placeholder</h4>
    <div>

    </div>
```

```Razor TagHelper
    @addTagHelper *, Kendo.Mvc

    <h4>TextBox with a Placeholder</h4>
    <div>

    </div>
```

## 2. Initialize the TextBox

Use the TextBox HtmlHelper or TagHelper to add the component to a page:

* The `Name()` configuration method is mandatory as its value is used for the `id` and the name attributes of the TextBox element.
* The `Placeholder()` configuration specifies the text that appears initially as a hint.

```Razor HtmlHelper
@using Kendo.Mvc.UI

<h4>TextBox with a Placeholder</h4>
<div>
    @(Html.Kendo().TextBox()
        .Name("textbox")
        .Placeholder("Name...")
        .HtmlAttributes(new { style = "width: 300px;" })
    )
</div>
```

```Razor TagHelper
@addTagHelper *, Kendo.Mvc

<h4>TextBox with a Placeholder</h4>
<div>
    <kendo-textbox name="textbox" style="width: 300px;" 
    placeholder="Name...">
    </kendo-textbox>
</div>
```

## 3. Define a Label Text

The next step is to present a description in front of the TextBox component by using the `Label()` property.

```Razor HtmlHelper
@using Kendo.Mvc.UI

<h4>TextBox with a Placeholder</h4>
<div>
    @(Html.Kendo().TextBox()
        .Name("textbox")
        .Label(l => l.Content("Set value:"))
        .Placeholder("Name...")
        .HtmlAttributes(new { style = "width: 300px;" })
    )
</div>
```

```Razor TagHelper
 @addTagHelper *, Kendo.Mvc

<h4>TextBox with a Placeholder</h4>
<div>
    <kendo-textbox name="textbox" style="width: 300px;" placeholder="Name...">
         <textbox-label content="Set value:"/>
         </kendo-textbox>
</div>
```

## 4. Handle a TextBox Event

The TextBox component provides convenient events for implementing your desired logic. In this tutorial, you will use the exposed `Change()` event to log the current TextBox value in the browser's console.

```Razor HtmlHelper
@using Kendo.Mvc.UI

<h4>TextBox with a Placeholder</h4>
<div>
    <script>
       function change(e) {
          console.log("Change :: " + this.value());
       }
    </script>

    @(Html.Kendo().TextBox()
        .Name("textbox")
        .Label(l => l.Content("Set value:"))
        .Placeholder("Name...")
        .Events(e => e.Change("change"))
        .HtmlAttributes(new { style = "width: 300px;" })
    )
</div>
```

```Razor TagHelper
@addTagHelper *, Kendo.Mvc

<h4>TextBox with a Placeholder</h4>
<div>
    <script>
       function change(e) {
          console.log("Change :: " + this.value());
       }
    </script>

    <kendo-textbox name="textbox" style="width: 300px;" 
    placeholder="Name..." on-change="change">
       <textbox-label content="Set value:"/>
       </kendo-textbox>
</div>
```

## 5. (Optional) Reference Existing TextBox Instances

You can reference the TextBox instances that you have created and build on top of their existing configuration:

1. Use the `id` attribute of the component instance to establish a reference.

   ```JS script
   <script>
       var textboxReference = $("#textbox").data("kendoTextBox"); // textboxReference is a reference to the existing TextBox instance of the helper.
   </script>
   ```

2. Use the [TextBox client-side API](https://docs.telerik.com/kendo-ui/api/ui/textbox#methods) to control the behavior of the widget. In this example, you will use the `value()` method to change its current content.

   ```JS script
   <script>
       var textboxReference = $("#textbox").data("kendoTextBox"); // textboxReference is a reference to the existing TextBox instance of the helper.
       textboxReference.value("Sample text"); // Update the current TextBox value.
       console.log(textboxReference.value()); // Log the new TextBox value in the browser's console.
   </script>
   ```

## Explore this Tutorial in REPL

You can continue experimenting with the code sample above by running it in the Telerik REPL server playground:

* [Sample code with the TextBox HtmlHelper](https://netcorerepl.telerik.com/QHEvbJFL14nUQBCX42)
* [Sample code with the TextBox TagHelper](https://netcorerepl.telerik.com/GnObbJFh14nVCZns54)

## Next Steps

* [Set Labels to the TextBox](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/textbox/labels)
* [Customize the Appearance of the TextBox](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/textbox/appearance)
* [Explore the Accessibility Features of the TextBox](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/textbox/accessibility/overview)

## See Also

* [Using the API of the TextBox for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/textbox/api)
* [Client-Side API of the TextBox](https://docs.telerik.com/kendo-ui/api/ui/textbox)
* [Server-Side API of the TextBox](https://www.telerik.com/aspnet-core-ui/documentation/api/textbox)
* [Knowledge Base Section](https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base)