CheckboxButtons

Overview

Since 4.1

The ace:checkboxButtons component renders a group of checkbox buttons. Its value reflects which of these buttons are selected, with the option to force this selection to be mutually exclusive or not.

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:checkboxButtons header="Header" mutuallyExclusive="true" value="#{bean.selected}">
            <f:selectItem itemLabel="One" itemValue="One" />
            <f:selectItem itemLabel="Two" itemValue="Two" />
            <f:selectItem itemLabel="Three" itemValue="Three" />
        </ace:checkboxButtons>
    </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.

mutuallyExclusive If true, only one button in the group can be selected at one time, selecting a new button deselects the previously selected one.

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

indicatorPosition Position of input-required or input-optional indicator relative to checkboxes.

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 checking/unchecking a checkbox.

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: checkbox.

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-checkboxbuttons ui-widget ui-widget-content ui-corner-all" style="[user defined styles]">
	<!-- Header -->
	<div class="ui-widget-header ui-corner-top"></div>
	<!-- Checkbox button -->
	<div class="ice-checkboxbutton"></div>
</div>

Known Issues

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

Additional Resources

None.