Button - Keyboard Support

This is a standard button with "AccessKey: A".
This is a Link button with "AccessKey: B".


Radio buttons with AccessKey attributes: 1, 2 and 3, respectively.


Checkbox buttons with AccessKey attributes: 4, 5 and 6, respectively.
These RadButton checkbox buttons have AccessKey attributes: 7, 8 and 9.
This CustomToggle button has assigned "AccessKey: 0 (number)".
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This example demonstrates how you can use the keyboard to control a RadButton. You can focus a button by using the Tab key if you set the TabIndex property of RadButton according to the desired flow of the page.

In addition, you can use a shortcut if you set the AccessKey property. Press Alt+AccessKey in IE and Chrome, Shift+Alt+AccessKey for Firefox and Shift+Esc+AccessKey for Opera.

To execute a selected Link button press the Enter key.

Note: By default tab-access is disabled in Safari. To enable it, check "Preferences > Advanced > Press tab to highlight each item on the page".

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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 runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <telerik:RadWindowManager RenderMode="Lightweight" EnableAriaSupport="true" ID="RadWindowManager" runat="server">
        </telerik:RadWindowManager>
        <div>
            <table cellpadding="0" cellspacing="0" width="100%" class="imgBtnTable">
                <tr>
                    <td class="center">
                        <telerik:RadButton RenderMode="Lightweight" AccessKey="A" TabIndex="1" OnClientClicked="OnClientClicked" ID="btnUpload"
                            AutoPostBack="false" runat="server" ButtonType="StandardButton" Text="Standard Button">
                            <Icon PrimaryIconCssClass="rbUpload" PrimaryIconLeft="5"></Icon>
                        </telerik:RadButton>
                    </td>
                    <td>This is a standard button with "AccessKey: A".
                    </td>
                </tr>
                <tr>
                    <td class="center">
                        <telerik:RadButton RenderMode="Lightweight" ID="RadButton1" AccessKey="B" TabIndex="2" AutoPostBack="false" OnClientClicked="OnClientClicked"
                            runat="server" ButtonType="LinkButton" Text="Link Button" ToolTip="Link Button">
                            <Icon SecondaryIconCssClass="rbSave"></Icon>
                        </telerik:RadButton>
                    </td>
                    <td>This is a Link button with "AccessKey: B".
                    </td>
                </tr>
                <tr>
                    <td class="center">
                        <telerik:RadButton RenderMode="Lightweight" ID="RadioButton1" AccessKey="1" TabIndex="3" OnClientClicked="OnClientClicked"
                            runat="server" ButtonType="ToggleButton" ToggleType="Radio" AutoPostBack="false"
                            GroupName="Radio" Text="Radio Button 1" ToolTip="Radio Button 1">
                        </telerik:RadButton>
                        <br />
                        <telerik:RadButton RenderMode="Lightweight" ID="RadioButton2" AccessKey="2" TabIndex="4" OnClientClicked="OnClientClicked"
                            runat="server" ButtonType="ToggleButton" ToggleType="Radio" AutoPostBack="false"
                            GroupName="Radio" Text="Radio Button 2" Checked="true" ToolTip="Radio Button 2">
                        </telerik:RadButton>
                        <br />
                        <telerik:RadButton RenderMode="Lightweight" ID="RadioButton3" AccessKey="3" TabIndex="5" OnClientClicked="OnClientClicked"
                            runat="server" ButtonType="ToggleButton" ToggleType="Radio" AutoPostBack="false"
                            GroupName="Radio" Text="Radio Button 3" ToolTip="Radio Button 3">
                        </telerik:RadButton>
                    </td>
                    <td>Radio buttons with AccessKey attributes: 1, 2 and 3, respectively.
                    </td>
                </tr>
                <tr>
                    <td class="center">
                        <telerik:RadButton RenderMode="Lightweight" ID="RadButton2" AccessKey="4" TabIndex="6" OnClientClicked="OnClientClicked"
                            runat="server" ButtonType="ToggleButton" ToggleType="CheckBox" AutoPostBack="false"
                            Text="CheckBox 1" ToolTip="CheckBox 1">
                        </telerik:RadButton>
                        <br />
                        <telerik:RadButton RenderMode="Lightweight" ID="RadButton3" AccessKey="5" TabIndex="7" OnClientClicked="OnClientClicked"
                            runat="server" ButtonType="ToggleButton" ToggleType="CheckBox" AutoPostBack="false"
                            Text="CheckBox 2" Checked="true" ToolTip="CheckBox 2">
                        </telerik:RadButton>
                        <br />
                        <telerik:RadButton RenderMode="Lightweight" ID="RadButton4" AccessKey="6" TabIndex="8" OnClientClicked="OnClientClicked"
                            runat="server" ButtonType="ToggleButton" ToggleType="CheckBox" AutoPostBack="false"
                            Text="CheckBox 3" ToolTip="CheckBox 3">
                        </telerik:RadButton>
                    </td>
                    <td>Checkbox buttons with AccessKey attributes: 4, 5 and 6, respectively.
                    </td>
                </tr>
                <tr>
                    <td class="center">
                        <telerik:RadButton RenderMode="Lightweight" ID="CheckBox1" AccessKey="7" TabIndex="9" OnClientClicked="OnClientClicked"
                            runat="server" ButtonType="StandardButton" ToggleType="CheckBox" Checked="true"
                            AutoPostBack="false" BorderWidth="0" BackColor="transparent" Text="CheckBox 1">
                            <ToggleStates>
                                <telerik:RadButtonToggleState Text="Checked" SecondaryIconCssClass="rbToggleCheckboxChecked"></telerik:RadButtonToggleState>
                                <telerik:RadButtonToggleState Text="UnChecked" SecondaryIconCssClass="rbToggleCheckbox"></telerik:RadButtonToggleState>
                            </ToggleStates>
                        </telerik:RadButton>
                        <div style="padding-bottom: 5px;">
                        </div>
                        <telerik:RadButton RenderMode="Lightweight" ID="CheckBox" AccessKey="8" TabIndex="10" OnClientClicked="OnClientClicked"
                            runat="server" ButtonType="StandardButton" ToggleType="CheckBox" AutoPostBack="false"
                            BorderWidth="0" BackColor="transparent" Text="CheckBox 2">
                            <ToggleStates>
                                <telerik:RadButtonToggleState Text="Checked" SecondaryIconCssClass="rbToggleCheckboxChecked"></telerik:RadButtonToggleState>
                                <telerik:RadButtonToggleState Text="UnChecked" SecondaryIconCssClass="rbToggleCheckbox"></telerik:RadButtonToggleState>
                            </ToggleStates>
                        </telerik:RadButton>
                        <div style="padding-bottom: 5px;">
                        </div>
                        <telerik:RadButton RenderMode="Lightweight" ID="CheckBox3" AccessKey="9" TabIndex="11" OnClientClicked="OnClientClicked"
                            runat="server" ButtonType="StandardButton" ToggleType="CheckBox" Checked="true"
                            AutoPostBack="false" BorderWidth="0" BackColor="transparent" Text="CheckBox 3">
                            <ToggleStates>
                                <telerik:RadButtonToggleState Text="Checked" SecondaryIconCssClass="rbToggleCheckboxChecked"></telerik:RadButtonToggleState>
                                <telerik:RadButtonToggleState Text="UnChecked" SecondaryIconCssClass="rbToggleCheckbox"></telerik:RadButtonToggleState>
                            </ToggleStates>
                        </telerik:RadButton>
                    </td>
                    <td>These RadButton checkbox buttons have AccessKey attributes: 7, 8 and 9.
                    </td>
                </tr>
                <tr>
                    <td class="center">
                        <telerik:RadButton RenderMode="Lightweight" ID="BuiltinIconsButton2" AccessKey="0" TabIndex="12" OnClientClicked="OnClientClicked"
                            runat="server" ButtonType="StandardButton" Text="Toggle Button" ToggleType="CustomToggle"
                            AutoPostBack="false">
                            <ToggleStates>
                                <telerik:RadButtonToggleState SecondaryIconCssClass="rbOk" Text="OK"></telerik:RadButtonToggleState>
                                <telerik:RadButtonToggleState SecondaryIconCssClass="rbCancel" Text="Cancel"></telerik:RadButtonToggleState>
                            </ToggleStates>
                        </telerik:RadButton>
                    </td>
                    <td>This CustomToggle button has assigned "AccessKey: 0 (number)".
                    </td>
                </tr>
            </table>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?