ui:checkbox

Purpose

A checkbox input control. Checkboxes allow users to choose between two possible states, e.g. on/off, true/false, etc.

Refer to Checkbox for further information.

Styles

The following styles apply to ui:checkbox by default.

ui|checkbox {
  display: block;
}

Contains

Attributes

Attribute Description Type Default Options Use
checked Sets the initial state of the checkbox, i.e. the initial value of the checked property. xs:boolean false true, false  optional 

Attribute groups

Example

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
  xmlns:cst="http://www.volantis.com/xmlns/2009/07/cf2/template"
  xmlns:cf2="http://www.volantis.com/xmlns/2009/07/cf2"
  xmlns:ui="http://www.volantis.com/xmlns/2009/07/cf2/ui">
  <head>
    <title>ui:checkbox</title>
  </head>
  <body>
    <div>
      <div>
        <p>
          <ui:label for="chbox1">Checkbox label: </ui:label>
          <ui:checkbox id="chbox1"/>
        </p>
      </div>
      <div>
        <table>
          <tr>
            <td style="font-weight: bold;">Checkbox properties: </td>
          </tr>
          <tr>
            <td>checked</td>
            <td><cst:value property-value="chbox1#checked" path="."/></td>
            <td>
              <ui:button>
                <span>Switch</span>
                <cf2:on event="cf2:activate">
                  <cf2:param component="chbox1" name="control"/>
                  control.opGet('checked').set(!control.opGet('checked').get()); </cf2:on>
              </ui:button>
            </td>
          </tr>
          <tr>
            <td>readonly</td>
            <td><cst:value property-value="chbox1#readonly" path="."/></td>
            <td>
              <ui:button>
                <span>Switch</span>
                <cf2:on event="cf2:activate">
                  <cf2:param component="chbox1" name="control"/>
                  control.opGet('readonly').set(!control.opGet('readonly').get()); </cf2:on>
              </ui:button>
            </td>
          </tr>
          <tr>
            <td>required</td>
            <td><cst:value property-value="chbox1#required" path="."/></td>
            <td>
              <ui:button>
                <span>Switch</span>
                <cf2:on event="cf2:activate">
                  <cf2:param component="chbox1" name="control"/>
                  control.opGet('required').set(!control.opGet('required').get()); </cf2:on>
              </ui:button>
            </td>
          </tr>
          <tr>
            <td>enabled</td>
            <td><cst:value property-value="chbox1#enabled" path="."/></td>
            <td>
              <ui:button>
                <span>Switch</span>
                <cf2:on event="cf2:activate">
                  <cf2:param component="chbox1" name="control"/>
                  control.opGet('enabled').set(!control.opGet('enabled').get()); </cf2:on>
              </ui:button>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>

Related topics