TextBox

TextBox Overview

A TextBox provides a highly customizable interface for displaying a single line of text and can be integrated into forms or used as a standalone item. Typically, you utilize a TextBox when the user needs to add short entries as unformatted text. The component has a fixed height and supports plain data with no format restrictions.

To choose the correct text field type for your application design, always consider the length of the data the user must enter. For example, a TextBox is suitable for single-line data, while a TextArea component is preferable for multi-line data.

Live Demo

Appearance

TextBoxes provide built-in styling options that grant visually appealing and flexible rendering experience.

Apart from the default vision of the Telerik and Kendo UI TextBox, the component supports alternative styling options which enable you to configure the individual aspects of its appearance.

States

Depending on the action you want to imply through its appearance, the Telerik and Kendo UI TextBox can acquire and can be rendered in the following states:

• A TextBox in its normal state is fully active, but the user is not interacting with it. This is the default state of the component. It can contain an explanatory placeholder text or an already prefilled text.
• k-hover—The hover state of a TextBox is applied when the user hovers over the component but does not click it. The mouse pointer changes to indicate that you can type into the component.
• k-focus—The focus state of the TextBox is triggered when the user navigates to the component by keyboard, voice, or mouse click. This state must highlight the TextBox so that it covers all accessibility requirements.
• k-invalid—The invalid state of the TextBox indicates that the input validation requirements are not met. The user is notified that the entered data is incorrect and must be revised so that the input operation can complete.
• k-invalid k-focus—The invalid focus state of a TextBox is a result of spotlighting a TextBox whose value or input type does not pass the validation requirements.
• k-disabled—The disabled state of the TextBox indicates that the user cannot interact with the component. When disabled, the component has no interactive behavior, it is faded out and slightly out of focus, which helps the user to distinguish it from the active elements on the page.

Anatomy

The anatomy of the TextBox summarizes the elements of the component. Depending on its elements, the Telerik and Kendo UI TextBoxes can be any of the following types:

• A TextBox with a label and hint text—You can configure the label and the hint text when you use the TextBox as a part of the Form component.
• A TextBox without a label and hint text—When the TextBox is integrated into a more complex component, such as the Grid, hint a label and hint text are usually not required.

The next image shows the anatomy of a TextBox and includes the following elements:

1. Input field
2. Label (optional, used only in the Form component)
3. Hint text (optional, used only in the Form component)
4. Placeholder or input value

When the user enters a value into the TextBox, the component renders a Clear button that resets the value.

When included in the Telerik & Kendo UI Form component, the TextBox supports validation that enables you to analyze the input values and prevent the submission of unsuitable entries.

The TextBox component provides an option for adding custom items as prefix and suffix adornments that can contain icons, text, or even a component. These adornments help the users to identify the type of required input or possible actions.

1. Icon prefix and suffix
2. Text prefix and suffix
3. Component prefix and suffix

The TextBox is capable of rendering multiple elements of its anatomy at the same time, for example, a Clear button, a validation icon, and an icon suffix.

Size

The TextBox provides the size configuration option that enables you to control how big or small the rendered TextBox will be. TextBoxes also provide options for size customization. To avoid inconsistencies when combining components, configure them using the same size setting. By default, the TextBoxes are medium-sized.

size provides the following available options: 

• small—Renders a small TextBox which is optimized for compact UI designs. The small TextBox fits into more complex components such as Toolbar or Grid, where the available space is limited. The small Telerik and Kendo UI TextBoxes use the same typographic style as the medium text boxes. However, to decrease the height, the small TextBox applies a $kendo-spacing, 0.5 spacing value for its vertical padding.
• medium (default)—Renders a medium text box. The medium Telerik and Kendo UI TextBox uses the same typographic style as the small text boxes. However, the vertical height of the component is achieved by setting the $kendo-spacing, 1 spacing value for its vertical padding.
• large—Renders a large text box that is suitable for layouts with a lot of space between the elements to achieve an airy UI look and feel. The large TextBox is optimized for adaptive components and mobile UI designs and achieves the recommended touch area dimensions both by doubling the value of their vertical paddings to $kendo-spacing, 2 and by using a different typographic style with a bigger font size and line height.
• none—Does not set a size and allows you to add your own, custom value.

1. Small
2. Medium
3. Large

Fill Mode

The TextBox provides the fillMode configuration option that enables you to visually achieve a certain atmosphere in your app. TextBoxes also provide options for fill-mode customization. By default, the TextBoxes are rendered in solid colors.

fillMode provides the following available options:

• solid (default)—The solid fill mode focuses on the layout and emphasizes the text field. It can be wrapped in a container with a different background color making the TextBox stand out.
• outline—The outline fill mode focuses less on the text field. Outlined TextBoxes do not have a background fill and can blend with the surrounding UI environment.
• flat—The flat fill mode emphasizes less the text field and more the data input. Also, the flat fill mode reduces additional visual noise and focuses on the content.
• none—Does not set a fillMode and allows you to add your own, custom value.  

1. Solid
2. Outline
3. Flat

Border Radius

The Textbox provides the rounded option that enables you to control the border radius of the rendered TextBox. The defined value for the border radius significantly affects the look-and-feel of the UI. To avoid inconsistency, it is recommended that you follow a single concept of rounding the element in your UI. The TextBox also supports settings for border-radius customization.

rounded provides the following available options:

• small—Renders a border radius of 2px.
• medium(default)—Renders a border radius of 4px.
• large—Renders a border radius of 6px.
• full—Renders a fully rounded border radius that creates the effect of 'pill'.
• none—Does not set a rounded and allows you to add your own, custom value.  

1. Small
2. Medium
3. Large
4. Full

Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

Kendo UI for Angular TextBoxFind more information about the Kendo UI for Angular TextBox in the official product documentation of the component.

Telerik UI for Blazor TextBoxFind more information about the Telerik UI for Blazor TextBox in the official product documentation of the component.

Kendo UI for jQuery TextBoxFind more information about the Kendo UI for jQuery TextBox in the official product documentation of the component.

KendoReact TextBoxFind more information about the KendoReact TextBox in the official product documentation of the component.

Kendo UI for Vue TextBoxFind more information about the Kendo UI for Vue TextBox in the official product documentation of the component.

Telerik UI for ASP.NET Core TextBoxFind more information about the Telerik UI for ASP.NET Core TextBox component.

Telerik UI for ASP.NET MVC TextBoxFind more information about the Telerik UI for ASP.NET MVC TextBox component.