All Controls

Input

Overview
Password Strength Checker
Single Input Rendering
What's New
- First Look
RadInputManager
RadTextBox
- First Look
RadNumericTextBox
- First Look
RadDateInput
- First Look
- Handle OnError Event
RadMaskedTextBox
- First Look
Common
Client-Side API
- API and Events
- Error Handling
Server-Side API
- Accessing Value
Accessibility and Internationalization
- WCAG 2.0 and Section 508 Accessibility Compliance
- WAI-ARIA Support
Appearance/Styling
- Styles
- Custom Styles

Rate this demo

Thank you for your post!

Input - First Look

Configurator

Set Empty Message:

Show/Hide Label

Set Max Length:

Show/Hide Button

Selection On Focus:

select

Button Position:

select

Single line:

Multi-line:

Password:

RadTextBox is an input control that lets the user enter text. 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 RadTextMode 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.

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

Finally, the ShowButton, ButtonsPosition, and ButtonCssClass properties let you add and configure buttons on the input control.

C# VB

Show code in new window Demo isolation steps

<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="false" Inherits="Telerik.InputExamplesCS.Input.Examples.RadTextBox.FirstLook.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <title>ASP.NET Input Demo - First Look</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest"
        DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadTextBox4">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox2"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox3"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadNumericTextBox1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox2"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox3"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadComboBox1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox2"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox3"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CheckBox1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox2"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox3"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CheckBox2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox2"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox3"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadComboBox2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox2"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTextBox3"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Label1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
     <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" BackgroundPosition="None">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            function ValueChanged(sender, e)
            {
                var div = document.getElementById("div1");
                div.innerHTML = "ValueChanged (Client Event): OldValue=" + e.get_oldValue() + "; NewValue=" + e.get_newValue() + ";";
                e.set_cancel(true);
            }
            function ButtonClick(sender, eventArgs)
            {
                var ajaxMgr = $find("<%= RadAjaxManager1.ClientID %>");
                ajaxMgr.ajaxRequest(sender.get_id());
            }
        </script>
    </telerik:RadScriptBlock>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configurator"
        Expanded="true">
        <table>
            <tr>
                <td>
                    Set Empty Message:
                </td>
                <td style="width: 168px">
                    <telerik:RadTextBox ID="RadTextBox4" runat="server" OnTextChanged="RadTextBox4_TextChanged"
                        AutoPostBack="True"></telerik:RadTextBox>
                </td>
                <td colspan="2">
                    <asp:CheckBox ID="CheckBox1" runat="server" Text="Show/Hide Label" Checked="true"
                        AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged"></asp:CheckBox>
                </td>
            </tr>
            <tr>
                <td>
                    Set Max Length:
                </td>
                <td>
                    <telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" OnTextChanged="RadNumericTextBox1_TextChanged"
                        AutoPostBack="True" NumberFormat-DecimalDigits="0"></telerik:RadNumericTextBox>
                </td>
                <td colspan="2">
                    <asp:CheckBox ID="CheckBox2" runat="server" Text="Show/Hide Button" AutoPostBack="true"
                        OnCheckedChanged="CheckBox2_CheckedChanged"></asp:CheckBox>
                </td>
            </tr>
            <tr>
                <td>
                    Selection On Focus:
                </td>
                <td>
                    <telerik:RadComboBox ID="RadComboBox1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged"
                        Width="128px">
                        <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>
                    </telerik:RadComboBox>
                </td>
                <td>
                    Button Position:
                </td>
                <td>
                    <telerik:RadComboBox ID="RadComboBox2" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadComboBox2_SelectedIndexChanged"
                        Width="128px">
                        <Items>
                            <telerik:RadComboBoxItem></telerik:RadComboBoxItem>
                            <telerik:RadComboBoxItem Text="Left" Value="Left"></telerik:RadComboBoxItem>
                            <telerik:RadComboBoxItem Text="Right" Value="Right"></telerik:RadComboBoxItem>
                        </Items>
                    </telerik:RadComboBox>
                </td>
            </tr>
        </table>
    </qsf:ConfiguratorPanel>
    <table width="100%">
        <tr>
            <td>
                <telerik:RadTextBox Width="195px" ID="RadTextBox1" runat="server" Label="Single line: "
                    EmptyMessage="type here" InvalidStyleDuration="100" AutoPostBack="true">
                    <ClientEvents OnValueChanged="ValueChanged" OnButtonClick="ButtonClick"></ClientEvents>
                </telerik:RadTextBox>
            </td>
            <td>
                <telerik:RadTextBox Width="195px" ID="RadTextBox2" runat="server" TextMode="MultiLine"
                    Label="Multi-line: " EmptyMessage="type here" AutoPostBack="true">
                    <ClientEvents OnValueChanged="ValueChanged" OnButtonClick="ButtonClick"></ClientEvents>
                </telerik:RadTextBox>
            </td>
            <td>
                <telerik:RadTextBox Width="195px" ID="RadTextBox3" runat="server" TextMode="Password"
                    Label="Password: " EmptyMessage="type here" AutoPostBack="true">
                    <ClientEvents OnValueChanged="ValueChanged" OnButtonClick="ButtonClick"></ClientEvents>
                </telerik:RadTextBox>
            </td>
        </tr>
    </table>
    <br/>
    <asp:Label ID="Label1" runat="server"></asp:Label>
    <div id="div1">
    </div>
    </form>
</body>
</html>

Controls

SharePoint Web Parts

Support Resources

Integration Examples

Input

Rate this demo

Input - First Look

try now Download a free 30-day trial with unlimited technical support.

Get Started Easily Explore our help resources to get up to speed with the RadControls faster.

See Pricing Check out the offers. Purchase an individual suite or treat yourself to one of our bundles.