You are viewing an old version (v. 10) of this page.
The latest version is v. 38, last edited on May 08, 2018 (view differences | )
<< View previous version | view page history | view next version >>


NOTE that rendering with class="ice-skin-sam" renders this component as a checkbutton (use label attr with labelPosition="on")
with class="ice-skin-rime" it is rendered as a checked box (use labelPosition="left")

 page should look like:

<html   xmlns:ice=""
<!-- can use either ice-skin-sam or ice-skin-rime -->
<h:body class="ice-skin-rime">
  <h:form >
     <ice:checkboxButton />
   <h:panelGroup id="overPanel" styleClass="ice-skin-sam">
	    <ice:checkboxButton id="chkbox" label="button1"
              labelPosition="on" value="#{button.checked}"


 <h:panelGroup id="overPanel" styleClass="ice-skin-rime">
	    <ice:checkboxButton id="chkbox" label="apple"
	       labelPosition="left" value="#{button.checked}"

Additional attributes:

 Defining value:
  the label tied to the value of the checkboxButton-usually to a backing bean through el.

 Defining label:
  The label of the button

 Defining labelPosition:
  position of the label. For ice-skin-sam, the label is placed directly on the button itself so labelPosition is "on". For ice-skin-rime, the label is placed to the left of the button, so labelPosition="left"

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

 Defining style class:
  a pass through to the root element of the component.

 Defining tabindex:
  a pass through to the root element of the component, default=0.

 Defining disabled:
  a pass through to the root element of the component.
 Defining the submission behaviour:
 When singleSubmit attribute is true, the checkbox only submits an event request a submit call with execute=@this and render=@all, if false then only the hidden field is updated on the client and some other component must submit the form for the server model side to be updated.

3. Keyboard short-cuts supported by pushbutton:

  • space will toggle the checkbox/checkbutton

 Aria role="button", aria-describedby and aria-disabled properties supported as well as aria-checked.


Action focus hover checked disabled onkeypress aria
yui-class yui-button-focus yui-button-hover yui-button-checked yui-button-disabled space or enter will submit role, disabled, description, checked
Submit     submit button &update component none submit button/update component  
Single Submit     stay on client/update hidden field none update hidden field  
Screen Reader description description role,description, checkedvalue role & checked value  
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

© Copyright 2017 ICEsoft Technologies Canada Corp.