YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Button Control: Radio Buttons

# Button Control: Radio Buttons

This example demonstrates different ways to create a Button that functions like an HTML radio button (`<input type="radio"/>`).

View example in new window.

Radio Buttons
From Markup
From JavaScript

## Creating Radio Buttons

The ButtonGroup class creates a set of Buttons that are mutually exclusive; checking one button in the group will uncheck all others in the group. The ButtonGroup class is defined by `YAHOO.widget.ButtonGroup` and a ButtonGroup's root HTML element is a `<div/>`.

A ButtonGroup can be instantiated three different ways:

- Using an existing set of `<input type="radio"/>` elements
- Using an existing set of Buttons defined using Button Control HTML
- Using no existing HTML

### Using an existing set of `<input type="radio"/>` elements

A ButtonGroup can be created from a set of existing `<input type="radio"/>` elements:

<div id="buttongroup1" class="yui-buttongroup"> <input id="radio1" type="radio" name="radiofield1" value="Radio 1" checked> <input id="radio2" type="radio" name="radiofield1" value="Radio 2"> <input id="radio3" type="radio" name="radiofield1" value="Radio 3"> <input id="radio4" type="radio" name="radiofield1" value="Radio 4"> </div>

To instantiate a ButtonGroup from existing HTML, pass the id of the ButtonGroup's `<div/>` element as the first argument to the ButtonGroup constructor and any additional configuration attributes as the second argument via an object literal. The ButtonGroup will automatically search its child nodes for HTML radio buttons (`<input type="radio"/>`) and use those elements to create instances of YAHOO.widget.Button of type "radio."

var oButtonGroup1 = new YAHOO.widget.ButtonGroup("buttongroup1")

### Using an existing set of Buttons defined using Button Control HTML

Alternatively, each Button in a ButtonGroup can be defined using the YUI Button HTML: An element with a class of "yui-button" and "yui-radio-button" containing a element with a class of "first-child" containing a `<button/>` element.

<div id="buttongroup2" class="yui-buttongroup"> <span id="radio5" class="yui-button yui-radio-button yui-button-checked"> <span class="first-child"> <button type="button" name="radiofield2" value="Radio 5"> Radio 5 </button> </span> </span> <span id="radio6" class="yui-button yui-radio-button"> <span class="first-child"> <button type="button" name="radiofield2" value="Radio 6"> Radio 6 </button> </span> </span> <span id="radio7" class="yui-button yui-radio-button"> <span class="first-child"> <button type="button" name="radiofield2" value="Radio 7"> Radio 7 </button> </span> </span> <span id="radio8" class="yui-button yui-radio-button"> <span class="first-child"> <button type="button" name="radiofield2" value="Radio 8"> Radio 8 </button> </span> </span> </div>

To instantiate a ButtonGroup using the Button Control HTML, pass the id of the ButtonGroup's root element (the element with the classes "yui-buttongroup" and "yui-radio-button" applied) as the first argument to constructor and any additional configuration attributes as the second argument via an object literal.

var oButtonGroup2 = new YAHOO.widget.ButtonGroup("buttongroup2");

### Using no existing HTML

To build a ButtonGroup with no existing HTML, pass a set of configuration attributes as a single argument to the ButtonGroup constructor using an object literal. Add buttons to the ButtonGroup via the `addButton` or `addButtons` methods.

var oButtonGroup3 = new YAHOO.widget.ButtonGroup({ id: "buttongroup3", name: "radiofield3", container: "radiobuttonsfromjavascript" }); oButtonGroup3.addButtons([ { label: "Radio 9", value: "Radio 9", checked: true }, { label: "Radio 10", value: "Radio 10" }, { label: "Radio 11", value: "Radio 11" }, { label: "Radio 12", value: "Radio 12" } ]);

In most cases, it is necessary to specify the ButtonGroup's id and container (the HTML element that the ButtonGroup should be appended to once created). If an id is not specified for the ButtonGroup, one will be generated using the `generateId` method of the Dom utility.

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### Button Control Examples:

### More Button Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings