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

Radios and Checkboxes

Radio Buttons


















CheckBoxes


















Three-State CheckBoxes


















The RadButton control provides an easy way to fully customize the look and feel of your check boxes and radio buttons. Any ButtonType (StandardButton, LinkButton, SkinnedButton and ToggleButton) can be turned into a check box, radio, or custom toggle button, by setting the ToggleType property to a value different than ButtonToggleType.None.

To get a checkbox, set the ToggleType property to CheckBox and you will get a button that looks like a StandardButton, LinkButton or SkinnedButton but behaves as a check box.

To get a radio button, set the ToggleType to Radio and you will get a button that behaves like a radio button, but looks like a StandardButton, LinkButton or SkinnedButton.

The ability to customize every single state of the RadButton, when used as a toggle button, gives the developer even more power to further enhance their check boxes and radio buttons.

  • Radio Buttons
    <telerik:RadButton RenderMode="Lightweight" ID="btnToggle1" runat="server" ToggleType="Radio" ButtonType="StandardButton"
        GroupName="StandardButton" AutoPostBack="false">
        <ToggleStates>
            <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-radio-checked"></telerik:RadButtonToggleState>
            <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-radio"></telerik:RadButtonToggleState>
        </ToggleStates>
    </telerik:RadButton
  • Checkboxes
    <telerik:RadButton RenderMode="Lightweight" ID="btnToggle2" runat="server" ToggleType="CheckBox" ButtonType="LinkButton"
        Checked="true" AutoPostBack="false">
        <ToggleStates>
            <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-checkbox-checked"></telerik:RadButtonToggleState>
            <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-checkbox"></telerik:RadButtonToggleState>
        </ToggleStates>
    </telerik:RadButton>
  • Three-state check box
    <telerik:RadButton RenderMode="Lightweight" ID="btnToggle3" runat="server" ToggleType="CustomToggle" ButtonType="StandardButton"
        AutoPostBack="false">
        <ToggleStates>
            <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-checkbox"></telerik:RadButtonToggleState>
            <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="p-i-three-state-indeterminate"></telerik:RadButtonToggleState>
            <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-checkbox-checked"
                CssClass="rbSkinnedButtonChecked"></telerik:RadButtonToggleState>
        </ToggleStates>
    </telerik:RadButton>
  • DefaultCS.aspx
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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" type="text/css" />
</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 size-narrow">
        <div class="clearer">
            <strong>Radio Buttons</strong>
        </div>
        <div class="classDiv">
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton16" runat="server" ToggleType="Radio" ButtonType="StandardButton"
                GroupName="StandardButton" AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-radio-checked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-radio"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton17" runat="server" ToggleType="Radio" Checked="true"
                GroupName="StandardButton" ButtonType="StandardButton" AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-radio-checked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-radio"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton18" runat="server" ToggleType="Radio" GroupName="StandardButton"
                ButtonType="StandardButton" AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-radio-checked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-radio"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
        </div>
        <div class="classDiv">
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton19" runat="server" ToggleType="Radio" ButtonType="LinkButton"
                GroupName="LinkButton" AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-radio-checked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-radio"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton20" runat="server" ToggleType="Radio" ButtonType="LinkButton"
                GroupName="LinkButton" Checked="true" AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-radio-checked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-radio"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton21" runat="server" ToggleType="Radio" ButtonType="LinkButton"
                GroupName="LinkButton" AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-radio-checked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-radio"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
        </div>
        <div class="classDiv">
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton22" runat="server" ToggleType="Radio" ButtonType="ToggleButton"
                GroupName="Radios" AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton23" runat="server" ToggleType="Radio" ButtonType="ToggleButton"
                Checked="true" GroupName="Radios" AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton24" runat="server" ToggleType="Radio" ButtonType="ToggleButton"
                GroupName="Radios" AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
        </div>
        <div class="clearer">
            <strong>CheckBoxes</strong>
        </div>
        <div class="classDiv">
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" ToggleType="CheckBox" ButtonType="StandardButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-checkbox-checked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-checkbox"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton2" runat="server" ToggleType="CheckBox" Checked="true"
                ButtonType="StandardButton" AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-checkbox-checked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-checkbox"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton3" runat="server" ToggleType="CheckBox" ButtonType="StandardButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-checkbox-checked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-checkbox"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
        </div>
        <div class="classDiv">
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton4" runat="server" ToggleType="CheckBox" ButtonType="LinkButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-checkbox-checked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-checkbox"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton5" runat="server" ToggleType="CheckBox" ButtonType="LinkButton"
                Checked="true" AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-checkbox-checked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-checkbox"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton6" runat="server" ToggleType="CheckBox" ButtonType="LinkButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-checkbox-checked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-checkbox"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
        </div>
        <div class="classDiv">
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton10" runat="server" ToggleType="CheckBox" ButtonType="ToggleButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton14" runat="server" ToggleType="CheckBox" ButtonType="ToggleButton"
                Checked="true" AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton15" runat="server" ToggleType="CheckBox" ButtonType="ToggleButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
        </div>
        <div class="clearer">
            <strong>Three-State CheckBoxes</strong>
        </div>
        <div class="classDiv">
            <telerik:RadButton RenderMode="Lightweight" ID="btnToggle1" runat="server" ToggleType="CustomToggle" ButtonType="StandardButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-checkbox"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="p-i-three-state-indeterminate"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-checkbox-checked"
                        CssClass="rbSkinnedButtonChecked"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton RenderMode="Lightweight" ID="btnToggle2" runat="server" ToggleType="CustomToggle" ButtonType="StandardButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-checkbox"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="p-i-three-state-indeterminate"
                        Selected="true"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-checkbox-checked"
                        CssClass="rbSkinnedButtonChecked"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton RenderMode="Lightweight" ID="btnToggle3" runat="server" ToggleType="CustomToggle" ButtonType="StandardButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-checkbox"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="p-i-three-state-indeterminate"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-checkbox-checked"
                        CssClass="rbSkinnedButtonChecked" Selected="true"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
        </div>
        <div class="classDiv">
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton7" runat="server" ToggleType="CustomToggle" ButtonType="LinkButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-checkbox"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="p-i-three-state-indeterminate"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-checkbox-checked"
                        CssClass="rbLinkButtonChecked"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton8" runat="server" ToggleType="CustomToggle" ButtonType="LinkButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-checkbox"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="p-i-three-state-indeterminate"
                        Selected="true"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-checkbox-checked"
                        CssClass="rbLinkButtonChecked"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton9" runat="server" ToggleType="CustomToggle" ButtonType="LinkButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-checkbox"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="p-i-three-state-indeterminate"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-checkbox-checked"
                        CssClass="rbLinkButtonChecked" Selected="true"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
        </div>
        <div class="classDiv">
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton11" runat="server" ToggleType="CustomToggle" ButtonType="ToggleButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-checkbox"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="p-i-three-state-indeterminate"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-checkbox-checked"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton12" runat="server" ToggleType="CustomToggle" ButtonType="ToggleButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-checkbox"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="p-i-three-state-indeterminate"
                        Selected="true"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-checkbox-checked"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton RenderMode="Lightweight" ID="RadButton13" runat="server" ToggleType="CustomToggle" ButtonType="ToggleButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="p-i-checkbox"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="p-i-three-state-indeterminate"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="p-i-checkbox-checked"
                        Selected="true"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance