View Source

h2. 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.

{tip}See the ICEfaces Showcase [Live Demo|http://icefaces-showcase.icesoft.org/showcase.jsf?grp=aceMenu&exp=checkboxButtons] of this component, complete with source code.{tip}


h2. Getting Started
{panel}
{code:xml|borderStyle=dashed}
<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>
{code}
{panel}
h2. Attributes

{tip:title=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|http://www.icefaces.org/docs/v4_latest/ace/tld/ace/checkboxButtons.html].{tip}
{panel}
*mutuallyExclusive* If true, only one button in the group can be selected at one time, selecting a new button deselects the previously selected one.
{panel}
{panel}
*labelPosition* Position of the individual checkbox labels relative to their input fields.
{panel}
{panel}
*indicatorPosition* Position of input-required or input-optional indicator relative to checkboxes.
{panel}
{panel}
*style* a pass through to the root element of the component.
{panel}
{panel}
*styleClass* a pass through to the root element of the component.
{panel}

h2. 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 |

h2. Client Behavior Events

| valueChange | Fired when the value changes by checking/unchecking a checkbox. |

h2. JavaScript API

None

h2. 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.

h2. CSS Classes

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

{code:xml}
<!-- 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>
{code}

h2. 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.

h2. Additional Resources

None.