Button - Radios and Checkboxes

Radio Buttons






UnChecked

Checked

UnChecked

UnChecked

Checked

UnChecked

CheckBoxes






UnChecked

Checked

UnChecked

UnChecked

Checked

UnChecked

Three-State CheckBoxes






UnChecked

Filled

Checked

UnChecked

Filled

Checked

Isolate this demo as a stand-alone application

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 ID="btnToggle" runat="server" ToggleType="Radio" ButtonType="StandardButton" GroupName="StandardButton">
        <ToggleStates>
            <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleRadioChecked" />
            <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleRadio" />
        </ToggleStates>
    </telerik:RadButton>
  • Checkboxes
    <telerik:RadButton ID="btnToggle" runat="server" ToggleType="CheckBox" ButtonType="LinkButton">
        <ToggleStates>
            <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked" />
            <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox" />
        </ToggleStates>
    </telerik:RadButton>
  • Three-state check box
    <telerik:RadButton ID="btnToggle" runat="server" ToggleType="CustomToggle" ButtonType="StandardButton">
        <ToggleStates>
            <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox" />
            <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="rbToggleCheckboxFilled" />
            <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked" CssClass="rbSkinnedButtonChecked" />
        </ToggleStates>
    </telerik:RadButton>
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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" />
</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 ID="RadButton16" runat="server" ToggleType="Radio" ButtonType="StandardButton"
                GroupName="StandardButton" AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleRadioChecked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleRadio"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton ID="RadButton17" runat="server" ToggleType="Radio" Checked="true"
                GroupName="StandardButton" ButtonType="StandardButton" AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleRadioChecked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleRadio"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton ID="RadButton18" runat="server" ToggleType="Radio" GroupName="StandardButton"
                ButtonType="StandardButton" AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleRadioChecked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleRadio"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
        </div>
        <div class="classDiv">
            <telerik:RadButton ID="RadButton19" runat="server" ToggleType="Radio" ButtonType="LinkButton"
                GroupName="LinkButton" AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleRadioChecked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleRadio"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton ID="RadButton20" runat="server" ToggleType="Radio" ButtonType="LinkButton"
                GroupName="LinkButton" Checked="true" AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleRadioChecked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleRadio"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton ID="RadButton21" runat="server" ToggleType="Radio" ButtonType="LinkButton"
                GroupName="LinkButton" AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleRadioChecked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleRadio"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
        </div>
        <div class="classDiv">
            <telerik:RadButton 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 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 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 ID="RadButton1" runat="server" ToggleType="CheckBox" ButtonType="StandardButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton ID="RadButton2" runat="server" ToggleType="CheckBox" Checked="true"
                ButtonType="StandardButton" AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton ID="RadButton3" runat="server" ToggleType="CheckBox" ButtonType="StandardButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
        </div>
        <div class="classDiv">
            <telerik:RadButton ID="RadButton4" runat="server" ToggleType="CheckBox" ButtonType="LinkButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton ID="RadButton5" runat="server" ToggleType="CheckBox" ButtonType="LinkButton"
                Checked="true" AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton ID="RadButton6" runat="server" ToggleType="CheckBox" ButtonType="LinkButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
        </div>
        <div class="classDiv">
            <telerik:RadButton 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 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 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 ID="btnToggle1" runat="server" ToggleType="CustomToggle" ButtonType="StandardButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="rbToggleCheckboxFilled"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked"
                        CssClass="rbSkinnedButtonChecked"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton ID="btnToggle2" runat="server" ToggleType="CustomToggle" ButtonType="StandardButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="rbToggleCheckboxFilled"
                        Selected="true"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked"
                        CssClass="rbSkinnedButtonChecked"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton ID="btnToggle3" runat="server" ToggleType="CustomToggle" ButtonType="StandardButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="rbToggleCheckboxFilled"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked"
                        CssClass="rbSkinnedButtonChecked" Selected="true"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
        </div>
        <div class="classDiv">
            <telerik:RadButton ID="RadButton7" runat="server" ToggleType="CustomToggle" ButtonType="LinkButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="rbToggleCheckboxFilled"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked"
                        CssClass="rbLinkButtonChecked"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton ID="RadButton8" runat="server" ToggleType="CustomToggle" ButtonType="LinkButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="rbToggleCheckboxFilled"
                        Selected="true"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked"
                        CssClass="rbLinkButtonChecked"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton ID="RadButton9" runat="server" ToggleType="CustomToggle" ButtonType="LinkButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="rbToggleCheckboxFilled"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked"
                        CssClass="rbLinkButtonChecked" Selected="true"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
        </div>
        <div class="classDiv">
            <telerik:RadButton ID="RadButton11" runat="server" ToggleType="CustomToggle" ButtonType="ToggleButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="rbToggleCheckboxFilled"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton ID="RadButton12" runat="server" ToggleType="CustomToggle" ButtonType="ToggleButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="rbToggleCheckboxFilled"
                        Selected="true"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
            <telerik:RadButton ID="RadButton13" runat="server" ToggleType="CustomToggle" ButtonType="ToggleButton"
                AutoPostBack="false">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="rbToggleCheckboxFilled"></telerik:RadButtonToggleState>
                    <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked"
                        Selected="true"></telerik:RadButtonToggleState>
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <br />
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?