RadioButtons

Overview

Since 4.1

The ace:radioButtons component renders a group of radio buttons. Its value reflects which of these buttons is selected, forcing this selection to be mutually exclusive.

See the ICEfaces Showcase Live Demo of this component, complete with source code.

Getting Started

<html ... xmlns:ace="http://www.icefaces.org/icefaces/components">
<h:body>
    <h:form>
        <ace:radioButtons header="Header" value="#{bean.selected}">
            <f:selectItem itemLabel="One" itemValue="One" />
            <f:selectItem itemLabel="Two" itemValue="Two" />
            <f:selectItem itemLabel="Three" itemValue="Three" />
        </ace:radioButtons>
    </h:form>
</h:body>
</html>

Attributes

TagLib Documentation
This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available here.

labelPosition Position of the individual radio button labels relative to their input fields.

indicatorPosition Position of input-required or input-optional indicator relative to the radio buttons.

style a pass through to the root element of the component.

styleClass a pass through to the root element of the component.

Event Listeners

As a descendant of UIInput, this component supports a value change listener.

valueChangeListener

Method that will be notified when a new value has been set for this component

Client Behavior Events

valueChange

Fired when the value changes by selecting/deselecting a radio button.

JavaScript API

None

Keyboard and ARIA Support

Default browser keyboard support for <button> elements (i.e. tabbing in and out, pressing space to activate).

The following ARIA roles are supported: radio.

CSS Classes

The following markup represents the basic HTML structure of the component and the CSS classes it uses.

<!-- Root container -->
<div class="[user defined classes] ice-ace-radiobuttons ui-widget ui-widget-content ui-corner-all" style="[user defined styles]">
	<!-- Header -->
	<div class="ui-widget-header ui-corner-top"></div>
	<!-- Radio button -->
	<div class="ice-ace-radiobutton"></div>
</div>

Known Issues

Note that while using ace:radioButtons with Client Validators is generally supported, the client validators' "validateOn" attribute is not supported with this component.

Additional Resources

None.