h2. Overview
The _ace:checkboxButton_ component is a simple true/false selection used to toggle a value that is bound to the button. As of EE 3.3.0_P02/4.0 release, the buttonGroup component can be used to manage a group of checkboxButton components.
{tip}See the ICEfaces Showcase [Live Demo|http://icefaces-showcase.icesoft.org/showcase.jsf?grp=aceMenu&exp=checkboxButton] 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 class="ice-skin-rime">
<h:form>
<ace:checkboxButton
value="{button.checked}"
label="checkbox"/>
</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/checkboxButton.html].{tip}
{panel}
*label* The label of the button-what the user sees that relates to that particular button. For example, "Remember Me"
{panel}
{panel}
*style* a pass through to the root element of the component.
{panel}
{panel}
*group* ID of button group component if this button is outside of the button group but wants to logically belong to the group.
{panel}
{panel}
*styleClass* a pass through to the root element of the component.
{panel}
{panel}
*tabindex* a pass through to the root element of the component, default=0.
{panel}
{panel}
*disabled* a pass through to the root element of the component.
{panel}
{panel}
The following attributes are supported as pass-thru attributes: *accesskey*, *alt*, *dir*, *label*, *lang*, *style*, *tabindex*, *title*, *type*, *onchange*, *onselect*, *onclick*, *ondblclick*, *onkeydown*, *onkeypress*, *onkeyup*, *onmousedown*, *onmousemove*, *onmouseout*, *onmouseover*, *onmouseup*, *onblur*, *onfocus*
{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
| action | Fired when the button is clicked or pressed by any other means (default event). |
{tip}Prior to 4.0 this event was named "activate". The "activate" event name is now deprecated but treated as an alias for "action" for backwards compatibility with existing applications.{tip}
h2. JavaScript API
None.
h2. Keyboard Support
Default browser keyboard support for {{<button>}} elements (i.e. tabbing in and out, pressing space to activate).
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="ice-checkboxbutton <user defined classes>" style="<user defined styles>">
<span class="yui-button yui-checkboxbutton-button ui-button ui-widget">
<span class="first-child">
<button class="ui-corner-all ice-checkboxbutton-checked">
<!-- Icon -->
<span class="fa fa-check-square-o fa-lg"></span>
</button>
</span>
</span>
</div>
{code}
h2. Known Issues
None.
h2. Additional Resources
None.
The _ace:checkboxButton_ component is a simple true/false selection used to toggle a value that is bound to the button. As of EE 3.3.0_P02/4.0 release, the buttonGroup component can be used to manage a group of checkboxButton components.
{tip}See the ICEfaces Showcase [Live Demo|http://icefaces-showcase.icesoft.org/showcase.jsf?grp=aceMenu&exp=checkboxButton] 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 class="ice-skin-rime">
<h:form>
<ace:checkboxButton
value="{button.checked}"
label="checkbox"/>
</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/checkboxButton.html].{tip}
{panel}
*label* The label of the button-what the user sees that relates to that particular button. For example, "Remember Me"
{panel}
{panel}
*style* a pass through to the root element of the component.
{panel}
{panel}
*group* ID of button group component if this button is outside of the button group but wants to logically belong to the group.
{panel}
{panel}
*styleClass* a pass through to the root element of the component.
{panel}
{panel}
*tabindex* a pass through to the root element of the component, default=0.
{panel}
{panel}
*disabled* a pass through to the root element of the component.
{panel}
{panel}
The following attributes are supported as pass-thru attributes: *accesskey*, *alt*, *dir*, *label*, *lang*, *style*, *tabindex*, *title*, *type*, *onchange*, *onselect*, *onclick*, *ondblclick*, *onkeydown*, *onkeypress*, *onkeyup*, *onmousedown*, *onmousemove*, *onmouseout*, *onmouseover*, *onmouseup*, *onblur*, *onfocus*
{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
| action | Fired when the button is clicked or pressed by any other means (default event). |
{tip}Prior to 4.0 this event was named "activate". The "activate" event name is now deprecated but treated as an alias for "action" for backwards compatibility with existing applications.{tip}
h2. JavaScript API
None.
h2. Keyboard Support
Default browser keyboard support for {{<button>}} elements (i.e. tabbing in and out, pressing space to activate).
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="ice-checkboxbutton <user defined classes>" style="<user defined styles>">
<span class="yui-button yui-checkboxbutton-button ui-button ui-widget">
<span class="first-child">
<button class="ui-corner-all ice-checkboxbutton-checked">
<!-- Icon -->
<span class="fa fa-check-square-o fa-lg"></span>
</button>
</span>
</span>
</div>
{code}
h2. Known Issues
None.
h2. Additional Resources
None.