New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

TextBox Basics

  • Demo Configurator
  • Selection On Focus
  • Resize mode
  • Button Position:

By default, the TextMode property of the control is set to InputMode.SingleLine, which displays a single-line text box. However, you can also use RadTextBox to display a multiline text box or a text box that masks user input by changing the value of the TextMode property to InputMode.MultiLine or InputMode.Password, respectively.
The text displayed in RadTextBox is specified or determined by using the Text property. Additionally, the Skin property allows you to control the appearance.
The display width of the text box (in characters) is specified by its Columns property. If RadTextBox is a multiline text box, the number of rows it displays is defined by the Rows property. To render text that wraps within the RadTextBox control, set the Wrap property to true.

The ShowButton, ButtonsPosition, and ButtonCssClass properties let you add and configure the buttons of the input control.


You can also specify how data is entered in RadTextBox by setting a few properties. To prevent the text from being modified, set the ReadOnly property to true. If you want to limit the user input to a specified number of characters, set the MaxLength property to the desired integer value.

The purpose of the EmptyMessage is to provide more information for the user about the RadTextBox itself without cluttering up the rest of the page.

You can choose whether to display the mouse cursor at the beginning/end of the input text or select the whole text when control gains focus. This is accomplished via the SelectionOnFocus property.

The Label property lets you to add a label associated to the input control

New: Since Q2 2013 RadTextBox when set to Multiline has new functionality - resizing. This functionality is controlled by the Resize property which options are: None, Vertical, Horizontal, and Both.

Related Resources

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="Telerik.TextBoxExamplesCS.Basics.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"    DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox2"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox3"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>

    <div class="demo-containers">
        <div class="demo-container">
            <telerik:RadTextBox RenderMode="Lightweight" Width="245px" ID="RadTextBox2" runat="server" TextMode="MultiLine" Resize="Both"
                Label="Multi-line: " EmptyMessage="type here">
            </telerik:RadTextBox>
        </div>
        <div class="demo-container">
            <telerik:RadTextBox RenderMode="Lightweight" Width="245px" ID="RadTextBox1" runat="server" Label="Single line: "
                EmptyMessage="type here" InvalidStyleDuration="100">
            </telerik:RadTextBox>
        </div>
        <div class="demo-container">
            <telerik:RadTextBox RenderMode="Lightweight" Width="245px" ID="RadTextBox3" runat="server" TextMode="Password"
                Label="Password: ">
            </telerik:RadTextBox>
        </div>
    </div>

    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" Size="Medium" runat="server">
                    <ul class="fb-group">
                        <li>
                            <asp:Label ID="Label1" Text="Set Emtpy Message" Width="130px" runat="server" /><br />
                            <qsf:TextBox ID="RadTextBox4" runat="server" Size="Auto" OnTextChanged="RadTextBox4_TextChanged" Width="160px"
                                AutoPostBack="True">
                            </qsf:TextBox>
                        </li>
                        <li>
                            <asp:Label ID="Label2" Text="Set Max Length" Width="130px" runat="server" /><br />
                            <qsf:NumericTextBox ID="RadNumericTextBox1" runat="server" OnTextChanged="RadNumericTextBox1_TextChanged" Size="Narrow"
                                AutoPostBack="True" NumberFormat-DecimalDigits="0" MinValue="1">
                            </qsf:NumericTextBox>
                        </li>                        
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" Size="Medium" runat="server">
                    <ul class="fb-group">
                        <li>
                            <asp:Label ID="Label3" Text="Selection On Focus" Width="130px" runat="server" /><br />
                            <qsf:ComboBox ID="RadComboBox1" runat="server" AutoPostBack="true" Size="Medium" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged"
                                Width="140px">
                                <Items>
                                    <telerik:RadComboBoxItem Value="None"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text="SelectAll" Value="SelectAll"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text="CaretToBeginning" Value="CaretToBeginning"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text="CaretToEnd" Value="CaretToEnd"></telerik:RadComboBoxItem>
                                </Items>
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <asp:Label ID="Label5" Text="Resize mode" runat="server" Width="130px" /><br />
                            <qsf:ComboBox ID="ResizingComboBox" runat="server" AutoPostBack="true" Size="Medium" OnSelectedIndexChanged="ResizingComboBox_SelectedIndexChanged"
                                Width="140px">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Both" Value="Both" Selected="true"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text="None" Value="None"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text="Horizontal" Value="Horizontal"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text="Vertical" Value="Vertical"></telerik:RadComboBoxItem>
                                </Items>
                            </qsf:ComboBox>
                        </li>
                        
                        <li>
                            <asp:Label ID="Label4" Text="Button Position:" runat="server" /><br />
                            <qsf:ComboBox ID="RadComboBox2" runat="server" AutoPostBack="true" Size="Medium" OnSelectedIndexChanged="RadComboBox2_SelectedIndexChanged"
                                Width="140px">
                                <Items>
                                    <telerik:RadComboBoxItem></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text="Left" Value="Left"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem Text="Right" Value="Right"></telerik:RadComboBoxItem>
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" Size="Medium" runat="server">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBox1" runat="server" Text="Show/Hide Label" Checked="true"
                                    AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged"></asp:CheckBox>
                            </span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBox2" runat="server" Text="Show/Hide Button" AutoPostBack="true"
                                    OnCheckedChanged="CheckBox2_CheckedChanged"></asp:CheckBox>
                            </span>
                        </li>                    
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance