ACE form API

Example Element Code
n/a Base form element. If no modifier class is applied, the default is top label layout. 

                                                                                      <form class="ace-form">
                                                                                        <!-- sections and/or groups go here-->
                                                                                      </form>
                                                                                      <form class="ace-form ace-form-toplabel"></form>
                                                                                      <form class="ace-form ace-form-sidelabel"></form>
                                                                                      <form class="ace-form ace-form-inline"></form>

Top Label


                                                                                      <% ace.Form(Array(_
                                                                                          "action", "#",_
                                                                                          "id", "forminlinesize1",_
                                                                                          "type", "toplabel"_
                                                                                      )) %>
                                                                                          <!-- section and/or groups go here -->
                                                                                      <% ace.FormEnd %>

Side Label


                                                                                      <% ace.Form(Array(_
                                                                                          "action", "#",_
                                                                                          "id", "forminlinesize1",_
                                                                                          "type", "sidelabel"_
                                                                                      )) %>
                                                                                          <!-- section and/or groups go here -->
                                                                                      <% ace.FormEnd %>

Inline Label


                                                                                      <% ace.Form(Array(_
                                                                                          "action", "#",_
                                                                                          "id", "forminlinesize1",_
                                                                                          "type", "inline"_
                                                                                      )) %>
                                                                                          <!-- section and/or groups go here -->
                                                                                      <% ace.FormEnd %>
n/a Form element with the last form-group moved to the right side. 

                                                                                          <form class="ace-form ace-form-split">
                                                                                          </form>

Top Label


                                                                                      <% ace.Form(Array(_
                                                                                          "action", "#",_
                                                                                          "id", "forminlinesize1",_
                                                                                          "type", "toplabel"_
                                                                                          "split", true_
                                                                                      )) %>
                                                                                          <!-- section and/or groups go here -->
                                                                                      <% ace.FormEnd %>
Section Heading
Form sections are optional; they contain groups. Most forms are not big enough to need sections. 

                                                                                          <fieldset class="ace-form-section">
                                                                                            <legend class="ace-form-legend"><span>Section Heading</span></legend>
                                                                                            <!-- Form groups go here-->
                                                                                          </fieldset>

Manual


                                                                                      <% ace.FormSection(Array(_
                                                                                          "legendText", "SECTION HEADING"_
                                                                                      )) %>
                                                                                          <!-- Form groups go here -->
                                                                                      <% ace.FormSectionEnd %>
(Single-input Form group)

Single-input Form Groups contain just one form element or item of non-form content. If there is more than one input, use a Multi Group.

Single-input Form Groups contain two Form Items, the first item set to type 'label' and the second item set to type 'input' (because they contain the label and input elements).

Form Group's TYPE must match the type of the input or non-form content contained in the group. That means a form input type (text, textarea, checkbox, radio, select, etc); or one of a limited range of non-form content (expander, message, table, tree).

 

                                                                                          <div class="ace-form-group ace-form-group-TYPE">
                                                                                                <div class="ace-form-item ace-form-item-label">
                                                                                                  <!-- Label goes here-->
                                                                                                </div>
                                                                                                <div class="ace-form-item ace-form-item-input">
                                                                                                  <!-- Input and state messages go here-->
                                                                                                </div>
                                                                                          </div>

Preset


                                                                                      <% ace.PresetFormGroup(Array(_
                                                                                        "type","text",_
                                                                                        "label","Simple text input",_
                                                                                        "id", "baseforminput"_
                                                                                      )) %>

Manual


                                                                                      <% ace.FormGroup(Array("type", "TYPE"))
                                                                                        ace.FormItemLabel(Array())
                                                                                        ace.FormItemLabelEnd
                                                                                        ace.FormItemInput(Array())
                                                                                        ace.FormItemInputEnd
                                                                                      ace.FormGroupEnd %>

Non-form content

In this case, a single full-width message:


                                                                                      <% ace.FormGroup(Array("type", "message"))
                                                                                          ace.FormItemInput(Array("type", "message"))
                                                                                            ace.message(Array("text", "This Message should be happy, with no debug errors."))
                                                                                          ace.FormItemInputEnd
                                                                                        ace.FormGroupEnd %>
(Multi-input form group)

As the name suggests, Multi-input Form Groups hold multiple form inputs. Because each input has its own label, the Multi input group needs to wrap the set and describe the overall purpose.

To achieve that, Multi-input groups are a fieldset element; and the label item is a legend element. The legend describes the purpose of the set of inputs.

In all other respects they are the same as a single input group.

TYPE is mixed when more than one input type is used. If all inputs are of the same type, then it should match that type (text, textarea, checkbox, radio, select, etc); including the non-form content options (expander, message, table, tree).

 

                                                                                          <fieldset class="ace-form-group ace-form-group-mixed">
                                                                                                <legend class="ace-form-item ace-form-item-label"><span>Group legend.</span></legend>
                                                                                                <div class="ace-form-item ace-form-item-input">
                                                                                                  <!-- Inputs go here.-->
                                                                                                </div>
                                                                                          </fieldset>

Manual


                                                                                      <% ace.FormGroupMulti(Array(_
                                                                                        "type", "mixed"_
                                                                                      ))
                                                                                        ace.FormItemMultiLabel(Array(_
                                                                                          "label", "Group legend"_
                                                                                        ))
                                                                                        ace.FormItemMultiLabelEnd
                                                                                        ace.FormItemMultiInput(Array())                  
                                                                                          <!-- Inputs go here -->
                                                                                        ace.FormItemMultiInputEnd
                                                                                      ace.FormGroupMultiEnd %>
n/a Form sub-item. For use within multi-group input items only. 

                                                                                          <fieldset class="ace-form-group ace-form-group-TYPE">
                                                                                                <legend class="ace-form-item ace-form-item-label"><span>Subitems example</span></legend>
                                                                                                <div class="ace-form-item ace-form-item-input">
                                                                                                      <div class="ace-form-subitem">
                                                                                                        <!-- inputs-->
                                                                                                      </div>
                                                                                                      <div class="ace-form-subitem">
                                                                                                        <!-- inputs-->
                                                                                                      </div>
                                                                                                </div>
                                                                                          </fieldset>

Manual


                                                                                      <% ace.FormGroupMulti(Array())
                                                                                        ace.FormItemMultiLabel(Array(_
                                                                                          "label", "Subitems example"_
                                                                                        ))
                                                                                        ace.FormItemMultiLabelEnd
                                                                                        ace.FormItemMultiInput(Array("type", "TYPE-SEE-DOCS"))
                                                                                          ace.FormSubItem(Array())
                                                                                            // inputs
                                                                                          ace.FormSubItemEnd
                                                                                          ace.FormSubItem(Array())
                                                                                            // inputs
                                                                                          ace.FormSubItemEnd
                                                                                        ace.FormItemMultiInputEnd
                                                                                      ace.FormGroupMultiEnd %>
Single input group. This pattern works for text, textarea, select and the HTML5 text variations such as email, date, etc. 

                                                                                              <div class="ace-form-group ace-form-group-text" id="baseforminput-group">
                                                                                                    <div class="ace-form-item ace-form-item-label">
                                                                                                          <label class="ace-form-label" for="baseforminput"><span class="ace-text">Simple text input</span>
                                                                                                          </label>
                                                                                                    </div>
                                                                                                    <div class="ace-form-item ace-form-item-text">
                                                                                                          <input class="ace-form-input ace-form-input-text" type="text" id="baseforminput">
                                                                                                          </input>
                                                                                                    </div>
                                                                                              </div>

Preset


                                                                                      <% ace.PresetFormGroup(Array(_
                                                                                        "type","text",_
                                                                                        "label","Simple text input",_
                                                                                        "id", "baseforminput"_
                                                                                      )) %>

Manual

In this example a text input is being produced, so the TYPE is text.


                                                                                      <% ace.FormGroup(Array("type", "text"))
                                                                                        ace.FormItemLabel(Array())
                                                                                          ace.FormLabel(Array("text", "Simple text input", "attrFor", "baseforminput"))
                                                                                        ace.FormItemLabelEnd
                                                                                        ace.FormItemInput(Array("type", "text"))
                                                                                          ace.FormInput(Array(_
                                                                                            "type", "text",_
                                                                                            "name", "baseforminput",_
                                                                                            "id", "baseforminput"_
                                                                                          ))
                                                                                        ace.FormItemInputEnd
                                                                                      ace.FormGroupEnd %>
The placeholder attribute may be used for optional, additional hints. Note that placeholders do not replace LABEL elements. The input must still be understandable without the attribute. 

                                                                                              <div class="ace-form-group ace-form-group-text" id="inputwithplaceholder-group">
                                                                                                    <div class="ace-form-item ace-form-item-label">
                                                                                                          <label class="ace-form-label" for="inputwithplaceholder"><span class="ace-text">Simple text input</span>
                                                                                                          </label>
                                                                                                    </div>
                                                                                                    <div class="ace-form-item ace-form-item-text">
                                                                                                          <input class="ace-form-input ace-form-input-text" type="text" placeholder="Additional hint" id="inputwithplaceholder">
                                                                                                          </input>
                                                                                                    </div>
                                                                                              </div>

Preset


                                                                                      <% ace.PresetFormGroup(Array(_
                                                                                        "type","text",_
                                                                                        "label","Simple text input",_
                                                                                        "placeholder", "Additional hint",_
                                                                                        "id", "inputwithplaceholder"_
                                                                                      )) %>

Manual

Note the group type matches the input type.


                                                                                      <% ace.FormGroup(Array("type", "text"))
                                                                                        ace.FormItemLabel(Array())
                                                                                          ace.FormLabel(Array(_
                                                                                            "text", "Simple text input",_
                                                                                            "attrFor", "inputwithplaceholder"_
                                                                                          ))
                                                                                        ace.FormItemLabelEnd
                                                                                        ace.FormItemInput(Array("type", "text"))
                                                                                          ace.FormInput(Array(_
                                                                                            "type", "text",_
                                                                                            "name", "inputwithplaceholder",_
                                                                                            "id", "inputwithplaceholder",_
                                                                                            "placeholder", "Additional hint"_
                                                                                          ))
                                                                                        ace.FormItemInputEnd
                                                                                      ace.FormGroupEnd %>
Error text explaining what to do
 Error state: the group and input get an error class; if there is an explanatory note it is linked to the input via the aria-describedby attribute (which matches the ID of the error message). The error message must be an accessible element, eg. by having a tabindex or aria role. 

                                                                                              <div class="ace-form-group ace-form-error ace-form-group-text" id="texttesterror-group">
                                                                                                    <div class="ace-form-item ace-form-item-label">
                                                                                                          <label class="ace-form-label" for="texttesterror"><span class="ace-text">Simple text input</span>
                                                                                                          </label>
                                                                                                    </div>
                                                                                                    <div class="ace-form-item ace-form-item-text">
                                                                                                          <input class="ace-form-input ace-form-input-text ace-form-error" type="text" aria-describedby="texttesterrormessage" placeholder="Example input" id="texttesterror" value="incorrect input">
                                                                                                          </input>
                                                                                                          <div class="ace-form-input-state ace-form-error" id="texttesterrormessage" tabIndex="-1">Error text explaining what to do</div>
                                                                                                    </div>
                                                                                              </div>

Preset


                                                                                      <% ace.PresetFormGroup(Array(_
                                                                                        "type", "text",_
                                                                                        "label", "Simple text input",_
                                                                                        "id", "texttesterror",_
                                                                                        "placeholder", "Example input",_
                                                                                        "value", "incorrect input",_
                                                                                        "message", "Error text explaining what to do",_
                                                                                        "messageId", "texttesterrormessage",_
                                                                                        "state", "error"_
                                                                                      )) %>

Manual


                                                                                      <% ace.FormGroup(Array("type", "text"))
                                                                                        ace.FormItemLabel(Array())
                                                                                          ace.FormLabel(Array(_
                                                                                            "text", "Simple text input",_
                                                                                            "attrFor", "texttesterror"_
                                                                                          ))
                                                                                        ace.FormItemLabelEnd
                                                                                        ace.FormItemInput(Array("type", "text"))
                                                                                          ace.FormInput(Array(_
                                                                                            "type", "text",_
                                                                                            "name", "texttesterror",_
                                                                                            "id", "texttesterror",_
                                                                                            "placeholder", "Example input",_
                                                                                            "value", "incorrect input",_
                                                                                            "state", "error"_
                                                                                          ))
                                                                                          ace.InputState(Array(_
                                                                                            "state", "error",_
                                                                                            "text", "Error text explaining what to do"_
                                                                                          ))
                                                                                        ace.FormItemInputEnd
                                                                                      ace.FormGroupEnd %>
Extra information about the input.
 Info provides explanatory text for the input. This is instead or in addition to any state message. Info is also linked to the input via the aria-describedby attribute (which matches the ID of the info div). Where both exist, both values are written into aria-describedby (space-separated).

Info element


                                                                                          <div class="ace-form-input-info" id="idoftheinfodiv" tabIndex="-1">Extra information about the input.</div>

Preset group with info element


                                                                                              <div class="ace-form-group ace-form-group-text" id="texttestinfo-group">
                                                                                                    <div class="ace-form-item ace-form-item-label">
                                                                                                          <label class="ace-form-label" for="texttestinfo"><span class="ace-text">Label</span>
                                                                                                          </label>
                                                                                                    </div>
                                                                                                    <div class="ace-form-item ace-form-item-text">
                                                                                                          <input class="ace-form-input ace-form-input-text" type="text" aria-describedby="texttestinfoinfo" id="texttestinfo">
                                                                                                          </input>
                                                                                                          <div class="ace-form-input-info" id="texttestinfoinfo" tabIndex="-1">Extra information about the input.</div>
                                                                                                    </div>
                                                                                              </div>

Info element


                                                                                      <%
                                                                                        ace.InputInfo(Array(_
                                                                                          "text", "Extra information about the input.",_
                                                                                          "id", "idstring"_
                                                                                        ))                
                                                                                      %>
Required fields use an ABBR element to provide alternative text. When visible, this is done via a title attribute; when the affordance is hidden it can simply be the text of the ABBR element. 

                                                                                              <div class="ace-form-group ace-form-group-text" id="texttestrequired-group">
                                                                                                    <div class="ace-form-item ace-form-item-label">
                                                                                                          <label class="ace-form-label ace-form-label-required" for="texttestrequired"><span class="ace-text">Simple text input</span><abbr title="Required" class="ace-form-label-required">*</abbr>
                                                                                                          </label>
                                                                                                    </div>
                                                                                                    <div class="ace-form-item ace-form-item-text">
                                                                                                          <input class="ace-form-input ace-form-input-text" type="text" id="texttestrequired" required="required">
                                                                                                          </input>
                                                                                                    </div>
                                                                                              </div>

Preset


                                                                                      <% ace.PresetFormGroup(Array(_
                                                                                        "type", "text",_
                                                                                        "label", "Simple text input",_
                                                                                        "id", "texttestrequired",_
                                                                                        "required", "true"_
                                                                                      )) %>

Manual


                                                                                      <% ace.FormGroup(Array("type", "text"))
                                                                                        ace.FormItemLabel(Array())
                                                                                          ace.FormLabel(Array(_
                                                                                              "text", "Simple text input",_
                                                                                              "attrFor", "baseforminput",_
                                                                                              "required", "true"_
                                                                                          ))
                                                                                        ace.FormItemLabelEnd
                                                                                        ace.FormItemInput(Array("type", "text"))
                                                                                          ace.FormInput(Array(_
                                                                                            "type", "text",_
                                                                                            "name", "baseforminput",_
                                                                                            "id", "baseforminput"_
                                                                                          ))
                                                                                        ace.FormItemInputEnd
                                                                                      ace.FormGroupEnd %>
Form labels can have an icon as the first or last child element. When an icon is present, the usual label text must be enclosed in a SPAN element set to class ace-text. 

                                                                                              <div class="ace-form-group ace-form-group-checkbox" id="dociconlabel1-group">
                                                                                                    <div class="ace-form-item ace-form-item-label">
                                                                                                    </div>
                                                                                                    <div class="ace-form-item ace-form-item-checkbox">
                                                                                                          <div class="ace-form-input-checkbox-set">
                                                                                                                <input class="ace-form-input ace-form-input-checkbox" type="checkbox" id="dociconlabel1">
                                                                                                                </input>
                                                                                                                <label class="ace-form-label" for="dociconlabel1"><span class="ace-icon ace-icon-status-priorityhigh" title="High Priority">High Priority</span><span class="ace-text">High Priority</span>
                                                                                                                </label>
                                                                                                          </div>
                                                                                                    </div>
                                                                                              </div>

Preset


                                                                                      <% ace.PresetFormGroup(Array(_
                                                                                        "type", "checkbox",_
                                                                                        "label", "Show high priority items",_
                                                                                        "id", "dociconlabel1",_
                                                                                        "icon", "status-priorityhigh",_
                                                                                        "iconText", "High Priority",_
                                                                                        "label", "High Priority"_
                                                                                      )) %>

Manual


                                                                                      <% ace.FormGroup(Array("type", "checkbox"))
                                                                                        ace.FormItemLabel(Array())
                                                                                        ace.FormItemLabelEnd
                                                                                        ace.FormItemInput(Array("type", "checkbox"))
                                                                                          ace.Checkbox(Array(_
                                                                                            "label", "High Priority",_
                                                                                            "id", "multicheck1",_
                                                                                            "icon", "status-priorityhigh",_
                                                                                            "iconText", "High Priority"_
                                                                                          ))
                                                                                        ace.FormItemInputEnd
                                                                                      ace.FormGroupEnd %>
Read only inputs are set by adding the native readonly attribute, in full quoted format.. 

                                                                                              <div class="ace-form-group ace-form-group-text" id="texttestrequiredreadonly-group">
                                                                                                    <div class="ace-form-item ace-form-item-label">
                                                                                                          <label class="ace-form-label" for="texttestrequiredreadonly"><span class="ace-text">Simple text input</span>
                                                                                                          </label>
                                                                                                    </div>
                                                                                                    <div class="ace-form-item ace-form-item-text">
                                                                                                          <input class="ace-form-input ace-form-input-text" type="text" id="texttestrequiredreadonly" value="Preset value" readonly="readonly">
                                                                                                          </input>
                                                                                                    </div>
                                                                                              </div>

Preset


                                                                                      <% ace.PresetFormGroup(Array(_
                                                                                        "type", "text",_
                                                                                        "label", "Simple text input",_
                                                                                        "id", "texttestrequiredreadonly",_
                                                                                        "value", "Preset value",_
                                                                                        "readonly", "true"_
                                                                                      )) %>

Manual


                                                                                      <% ace.FormGroup(Array("type", "text"))
                                                                                        ace.FormItemLabel(Array())
                                                                                          ace.FormLabel(Array(_
                                                                                            "text", "Simple text input",_
                                                                                            "attrFor", "texttestrequiredreadonly"_
                                                                                          ))
                                                                                        ace.FormItemLabelEnd
                                                                                        ace.FormItemInput(Array("type", "text"))
                                                                                          ace.FormInput(Array(_
                                                                                            "type", "text",_
                                                                                            "name", "texttestrequiredreadonly",_
                                                                                            "id", "texttestrequiredreadonly",_
                                                                                            "value", "Preset value",_
                                                                                            "readonly", "true"_
                                                                                          ))
                                                                                        ace.FormItemInputEnd
                                                                                      ace.FormGroupEnd %>
Disabled inputs are set by adding the native disabled attribute, in full quoted format. 

                                                                                              <div class="ace-form-group ace-form-group-text" id="texttestdisabled-group">
                                                                                                    <div class="ace-form-item ace-form-item-label">
                                                                                                          <label class="ace-form-label" for="texttestdisabled"><span class="ace-text">Disabled text input</span>
                                                                                                          </label>
                                                                                                    </div>
                                                                                                    <div class="ace-form-item ace-form-item-text">
                                                                                                          <input class="ace-form-input ace-form-input-text" type="text" id="texttestdisabled" value="Preset value" disabled="disabled">
                                                                                                          </input>
                                                                                                    </div>
                                                                                              </div>

Preset


                                                                                      <% ace.PresetFormGroup(Array(_
                                                                                        "type", "text",_
                                                                                        "label", "Disabled text input",_
                                                                                        "id", "texttesdisabled",_
                                                                                        "value", "Preset value",_
                                                                                        "disabled", "true"_
                                                                                      )) %>

Manual


                                                                                      <% ace.FormGroup(Array("type", "text"))
                                                                                        ace.FormItemLabel(Array())
                                                                                          ace.FormLabel(Array(_
                                                                                            "text", "Disabled text input",_
                                                                                            "attrFor", "texttesdisabled"_
                                                                                          ))
                                                                                        ace.FormItemLabelEnd
                                                                                        ace.FormItemInput(Array("type", "text"))
                                                                                          ace.FormInput(Array(_
                                                                                            "type", "text",_
                                                                                            "name", "texttestrequiredreadonly",_
                                                                                            "id", "texttesdisabled",_
                                                                                            "value", "Preset value",_
                                                                                            "disabled", "true"_
                                                                                          ))
                                                                                        ace.FormItemInputEnd
                                                                                      ace.FormGroupEnd %>
Assistive labels are not rendered visibly, but remain available to assistive technology. This technique should only be used where there is sufficient visual context that sighted users don't need a label.
  • For most elements, simply apply the class ace-assistive to the label.
  • Checkboxes and radio buttons require the class ace-form-label-assistive on the label element (to adjust some spacing around the visible input) and ace-assistive on the span.ace-text within the label (to hide the text).

                                                                                      <!-- Most labels... -->
                                                                                          <label class="ace-form-label ace-assistive"><span class="ace-text">Assistive label</span>
                                                                                          </label>
                                                                                      <!-- Checkbox -->
                                                                                          <div class="ace-form-input-checkbox-set">
                                                                                                <input class="ace-form-input ace-form-input-checkbox" type="checkbox" id="examplecheckboxwithassistive" checked="checked">
                                                                                                </input>
                                                                                                <label class="ace-form-label ace-form-label-assistive" for="examplecheckboxwithassistive"><span class="ace-text ace-assistive">Assistive label</span>
                                                                                                </label>
                                                                                          </div>
                                                                                      <!-- Radio -->
                                                                                          <div class="ace-form-input-radio-set">
                                                                                                <input class="ace-form-input ace-form-input-radio" type="radio" id="exampleradiowithassistive">
                                                                                                </input>
                                                                                                <label class="ace-form-label ace-form-label-assistive" for="exampleradiowithassistive"><span class="ace-text ace-assistive">Assistive label</span>
                                                                                                </label>
                                                                                          </div>

Text box with assistive label, using the preset:


                                                                                      <%
                                                                                        ace.PresetFormGroup(Array(_
                                                                                          "type","text",_
                                                                                          "label","Text input and assistive label",_
                                                                                          "assistiveLabel", true ,_
                                                                                          "id", "texttestassistive"_
                                                                                        ))
                                                                                      %>

When using the manual approach, any label can be set to assistive:


                                                                                      <%
                                                                                        ace.FormLabel(Array(_
                                                                                          "text", "Text for the label",_
                                                                                          "attrFor", "idofinput",_
                                                                                          "assistive", true _
                                                                                        ))
                                                                                      %>

Radio buttons and checkboxes also honour the 'assistive' property:


                                                                                      <%
                                                                                        ace.Radio(Array(_
                                                                                          "label", "Radio label text",_
                                                                                          "id", "idofradio",_
                                                                                          "name", "nameofradioset",_
                                                                                          "assistive", true _
                                                                                        ))
                                                                                        ace.RadioEnd
                                                                                      
                                                                                        ace.Checkbox(Array(_
                                                                                          "label", "Checkbox label text",_
                                                                                          "id", "idofcheckbox",_ 
                                                                                          "assistive", true _
                                                                                        ))
                                                                                        ace.CheckboxEnd
                                                                                      %>
A single checkbox is an unusual pattern, as the form input contains both the input and label; while the input container remains empty. Checkboxes can be set to checked state with the native checked attribute, in full quoted format. 

                                                                                      <form class="ace-form">
                                                                                            <div class="ace-form-group ace-form-group-checkbox">
                                                                                                  <div class="ace-form-item ace-form-item-label">
                                                                                                  </div>
                                                                                                  <div class="ace-form-item ace-form-item-input">
                                                                                                        <div class="ace-form-input-checkbox-set">
                                                                                                              <input class="ace-form-input ace-form-input-checkbox" type="checkbox" id="singlecheckbox" checked="checked">
                                                                                                              </input>
                                                                                                              <label class="ace-form-label" for="singlecheckbox"><span class="ace-text">Tickybox?</span>
                                                                                                              </label>
                                                                                                        </div>
                                                                                                  </div>
                                                                                            </div>
                                                                                      </form>

Preset


                                                                                      <% ace.PresetFormGroup(Array(_
                                                                                        "type", "checkbox",_
                                                                                        "label", "Single Checkbox",_
                                                                                        "id", "singlecheckbox"_
                                                                                      )) %>

Manual


                                                                                      <% ace.FormGroup(Array("type", "checkbox"))
                                                                                        ace.FormItemLabel(Array())
                                                                                        ace.FormItemLabelEnd
                                                                                        ace.FormItemInput(Array("type", "checkbox"))
                                                                                          ace.Checkbox(Array(_
                                                                                            "label", "Check 1",_
                                                                                            "id", "singlecheckbox",_
                                                                                            "label", "Single Checkbox"_
                                                                                          ))
                                                                                        ace.FormItemInputEnd
                                                                                      ace.FormGroupEnd %>
Multi radio
Radio button group. Note that you must not set set a radio button to both disabled AND checked. 

                                                                                          <fieldset class="ace-form-group ace-form-group-radio">
                                                                                                <legend class="ace-form-item ace-form-item-label"><span>Multi radio</span></legend>
                                                                                                <div class="ace-form-item ace-form-item-input">
                                                                                                      <div class="ace-form-input-radio-set">
                                                                                                            <input class="ace-form-input ace-form-input-radio" type="radio" name="multipleradio" id="multipleradio1">
                                                                                                            </input>
                                                                                                            <label class="ace-form-label" for="multipleradio1"><span class="ace-text">Radio 1</span>
                                                                                                            </label>
                                                                                                      </div>
                                                                                                      <div class="ace-form-input-radio-set">
                                                                                                            <input class="ace-form-input ace-form-input-radio" type="radio" name="multipleradio" id="multipleradio2" checked="checked">
                                                                                                            </input>
                                                                                                            <label class="ace-form-label" for="multipleradio2"><span class="ace-text">Radio 2 (checked)</span>
                                                                                                            </label>
                                                                                                      </div>
                                                                                                </div>
                                                                                          </fieldset>

Manual


                                                                                      <% ace.FormGroupMulti(Array(_
                                                                                        "type", "radio"_
                                                                                      ))
                                                                                        ace.FormItemMultiLabel(Array(_
                                                                                          "label", "Multi radio"_
                                                                                        ))
                                                                                        ace.FormItemMultiLabelEnd
                                                                                        ace.FormItemMultiInput(Array())
                                                                                          ace.Radio(Array(_
                                                                                            "label", "Radio 1",_
                                                                                            "id", "multiradio1",_
                                                                                            "name", "multiradio"_
                                                                                          ))
                                                                                          ace.RadioEnd
                                                                                          ace.Radio(Array(_
                                                                                            "label", "Radio 2 (checked)",_
                                                                                            "id", "multiradio2",_
                                                                                            "name", "multiradio",_
                                                                                            "checked", true _
                                                                                          ))
                                                                                          ace.RadioEnd
                                                                                        ace.FormItemMultiInputEnd
                                                                                      ace.FormGroupMultiEnd
                                                                                      %>
Multi checkbox
Multiple checkbox group. 

                                                                                          <fieldset class="ace-form-group ace-form-group-checkbox">
                                                                                                <legend class="ace-form-item ace-form-item-label"><span>Multi checkbox</span></legend>
                                                                                                <div class="ace-form-item ace-form-item-input">
                                                                                                      <div class="ace-form-input-checkbox-set">
                                                                                                            <input class="ace-form-input ace-form-input-checkbox" type="checkbox" id="multiplecheck1">
                                                                                                            </input>
                                                                                                            <label class="ace-form-label" for="multiplecheck1"><span class="ace-text">Check 1</span>
                                                                                                            </label>
                                                                                                      </div>
                                                                                                      <div class="ace-form-input-checkbox-set">
                                                                                                            <input class="ace-form-input ace-form-input-checkbox" type="checkbox" id="multiplecheck2" checked="checked">
                                                                                                            </input>
                                                                                                            <label class="ace-form-label" for="multiplecheck2"><span class="ace-text">Check 2 (checked)</span>
                                                                                                            </label>
                                                                                                      </div>
                                                                                                </div>
                                                                                          </fieldset>

Manual


                                                                                      <% ace.FormGroupMulti(Array(_
                                                                                          "type", "checkbox"_
                                                                                          ))
                                                                                          ace.FormItemMultiLabel(Array(_
                                                                                            "label", "Multi checkbox"_
                                                                                          ))
                                                                                          ace.FormItemMultiLabelEnd
                                                                                          ace.FormItemMultiInput(Array())
                                                                                            ace.Checkbox(Array(_
                                                                                              "label", "Check 1",_
                                                                                              "id", "multicheck1"_
                                                                                            ))
                                                                                            ace.CheckboxEnd
                                                                                            ace.Checkbox(Array(_
                                                                                              "label", "Check 2 (checked)",_
                                                                                              "id", "multicheck2",_
                                                                                              "checked", true _
                                                                                            ))
                                                                                            ace.CheckboxEnd
                                                                                          ace.FormItemMultiInputEnd
                                                                                        ace.FormGroupMultiEnd
                                                                                      %>
Snowflake text+checkbox
Where multiple inputs need to be combined within a form group, the group\'s type is always set to mixed and inline. Inline groups behave in a very similar way to inline forms. 

                                                                                          <fieldset class="ace-form-group ace-form-group-inline ace-form-group-mixed">
                                                                                                <legend class="ace-form-item ace-form-item-label"><span>Snowflake text+checkbox</span></legend>
                                                                                                <div class="ace-form-item ace-form-item-input">
                                                                                                      <label class="ace-form-label" for="snowflaketextandchecktext"><span class="ace-text">Foo</span>
                                                                                                      </label>
                                                                                                      <input class="ace-form-input ace-form-input-text ace-form-field-xsmall" type="text" id="snowflaketextandchecktext">
                                                                                                      </input>
                                                                                                      <div class="ace-form-input-checkbox-set">
                                                                                                            <input class="ace-form-input ace-form-input-checkbox" type="checkbox" id="snowflaketextandcheckcheck1" checked="checked">
                                                                                                            </input>
                                                                                                            <label class="ace-form-label" for="snowflaketextandcheckcheck1"><span class="ace-text">Chchcheckitout</span>
                                                                                                            </label>
                                                                                                      </div>
                                                                                                </div>
                                                                                          </fieldset>

Manual


                                                                                      <%
                                                                                      ace.FormGroupMulti(Array(_
                                                                                          "inline", "true",_
                                                                                          "type", "mixed"_
                                                                                        ))
                                                                                        ace.FormItemMultiLabel(Array(_
                                                                                          "label", "Snowflake text+check"_
                                                                                        ))
                                                                                        ace.FormItemMultiLabelEnd
                                                                                        ace.FormItemMultiInput(Array())
                                                                                          ace.LabelAndInput(Array(_
                                                                                            "label", "foo",_
                                                                                            "id", "snowflaketextandchecktext",_
                                                                                            "size", "xsmall"_
                                                                                          ))
                                                                                          ace.Checkbox(Array(_
                                                                                            "label", "Chchcheckitout",_
                                                                                            "id", "snowflaketextandcheck1",_
                                                                                            "checked", true _
                                                                                            ))
                                                                                          ace.CheckboxEnd
                                                                                        ace.FormItemMultiInputEnd
                                                                                      ace.FormGroupMultiEnd
                                                                                      %>
Input sizes can be overridden if required with the ace-form-field-SIZE class, although it is not recommended in most cases. Available sizes are xsmall, small, medium, large, xlarge, minwidth (smallest input allowed by design language), maxwidth (largest input allowed by design language) and fullwidth (100% width). If in doubt, just leave form inputs to their default size. 

                                                                                              <div class="ace-form-group" id="sizetestxsmall-group">
                                                                                                    <div class="ace-form-item ace-form-item-label">
                                                                                                          <label class="ace-form-label" for="sizetestxsmall"><span class="ace-text">Very small input</span>
                                                                                                          </label>
                                                                                                    </div>
                                                                                                    <div class="ace-form-item ace-form-item-text">
                                                                                                          <input class="ace-form-input ace-form-input-text ace-form-field-xsmall" type="text" id="sizetestxsmall">
                                                                                                          </input>
                                                                                                    </div>
                                                                                              </div>

Preset


                                                                                      <% ace.PresetFormGroup(Array(_
                                                                                        "label", "Very small input",_
                                                                                        "id", "sizetestxsmall",_
                                                                                        "size", "xsmall"_
                                                                                      )) %>

Manual


                                                                                      <% ace.FormGroup(Array("type", "text"))
                                                                                        ace.FormItemLabel(Array())
                                                                                          ace.FormLabel(Array(_
                                                                                              "text", "Very small input",_
                                                                                              "attrFor", "sizetestxsmall"_
                                                                                          ))
                                                                                        ace.FormItemLabelEnd
                                                                                        ace.FormItemInput(Array("type", "text"))
                                                                                          ace.FormInput(Array(_
                                                                                            "type", "text",_
                                                                                            "name", "sizetestxsmall",_
                                                                                            "id", "sizetestxsmall",_
                                                                                            "size", "xsmall"_
                                                                                          ))
                                                                                        ace.FormItemInputEnd
                                                                                      ace.FormGroupEnd %>
An input with a help link
To offer more information about this selection, help links can be used. Help links should be placed inside the input set wrapper (as siblings of the label and input). 

                                                                                          <fieldset class="ace-form-group ace-form-group-radio">
                                                                                                <legend class="ace-form-item ace-form-item-label"><span>An input with a help link</span></legend>
                                                                                                <div class="ace-form-item ace-form-item-input">
                                                                                                      <div class="ace-form-input-radio-set">
                                                                                                            <input class="ace-form-input ace-form-input-radio" type="radio" aria-describedby="radiohelp-info" id="radiohelp">
                                                                                                            </input>
                                                                                                            <label class="ace-form-label" for="radiohelp"><span class="ace-text">Radio option</span>
                                                                                                            </label>
                                                                                                            <div class="ace-form-input-info" id="radiohelp-info" tabIndex="-1"><a href="http://example.com/" class="ace-link"><span class="ace-icon ace-icon-status-help" title="Detailed help">Detailed help</span></a></div>
                                                                                                      </div>
                                                                                                      <div class="ace-form-input-radio-set">
                                                                                                            <input class="ace-form-input ace-form-input-radio" type="radio" aria-describedby="radiohelp-info2" id="radiohelp2">
                                                                                                            </input>
                                                                                                            <label class="ace-form-label" for="radiohelp2"><span class="ace-text">Radio option</span>
                                                                                                            </label>
                                                                                                            <div class="ace-form-input-info" id="radiohelp-info2" tabIndex="-1"><a href="http://example.com/" class="ace-link"><span class="ace-icon ace-icon-status-help" title="Detailed help">Detailed help</span></a></div>
                                                                                                      </div>
                                                                                                </div>
                                                                                          </fieldset>
n/a Within multi-groups, label sizes can be overridden with the ace-form-label-SIZE class, although it is not recommended in most cases. Available sizes are xsmall, small, medium, large and xlarge. If in doubt, just leave form inputs to their default size. 

                                                                                          <label class="ace-form-label ace-form-label-medium" id="demolabelsize"><span class="ace-text">Medium</span>
                                                                                          </label>

Manual


                                                                                      <%
                                                                                        ace.FormLabel(Array(_
                                                                                          "text", "Medium",_
                                                                                          "size", "medium",_
                                                                                          "attrFor", "inputput"_
                                                                                        ))
                                                                                      %>
Buttons group. Can contain buttons and submits. 

                                                                                          <div class="ace-form-group ace-form-group-buttons">
                                                                                                <div class="ace-form-item ace-form-item-buttons">
                                                                                                          <button class="ace-button" type="submit"><span>Submit</span></button>
                                                                                                </div>
                                                                                          </div>

Form button group

All buttons go inside a group:


                                                                                      <%
                                                                                        ace.FormGroup(Array("type","buttons"))
                                                                                            ace.FormItemInput(Array("type","buttons"))
                                                                                                ' buttons go here
                                                                                            ace.FormItemInputEnd
                                                                                        ace.FormGroupEnd
                                                                                      %>

Using preset buttons:


                                                                                      <%
                                                                                        ace.FormGroup(Array("type","buttons"))
                                                                                            ace.FormItemInput(Array("type","buttons"))
                                                                                              ace.PresetButtonSubmit(Array(_
                                                                                                "text", "Submit"_
                                                                                              ))
                                                                                              ace.PresetButtonCancel(Array(_
                                                                                                "iconText", "Cancel"_
                                                                                              ))
                                                                                            ace.FormItemInputEnd
                                                                                        ace.FormGroupEnd
                                                                                      %>

Using manual buttons:


                                                                                      <%
                                                                                        ace.FormGroup(Array("type","buttons"))
                                                                                            ace.FormItemInput(Array("type","buttons"))
                                                                                              ace.Button(Array(_
                                                                                                "text","Submit",_
                                                                                                "type", "default"_
                                                                                              ))
                                                                                            ace.FormItemInputEnd
                                                                                        ace.FormGroupEnd
                                                                                      %>
Select Element 

                                                                                              <div class="ace-form-group ace-form-group-select" id="demoselecttestjadedemo-group">
                                                                                                    <div class="ace-form-item ace-form-item-label">
                                                                                                          <label class="ace-form-label" for="demoselecttestjadedemo"><span class="ace-text">Select</span>
                                                                                                          </label>
                                                                                                    </div>
                                                                                                    <div class="ace-form-item ace-form-item-select">
                                                                                                              <select class="ace-form-input ace-form-input-select" id="demoselecttestjadedemo">
                                                                                                                    <option value="foo">Foo</option>
                                                                                                                    <option selected="selected" value="bar">Bar (selected)</option>
                                                                                                                    <option value="sin">Sin</option>
                                                                                                                    <option value="qua">Qua</option>
                                                                                                              </select>
                                                                                                    </div>
                                                                                              </div>

Manual using block:


                                                                                      <% ace.FormGroup(Array("type", "select"))
                                                                                        ace.FormItemLabel(Array())
                                                                                          ace.FormLabel(Array(_
                                                                                            "text", "Select",_
                                                                                            "attrFor", "selecttestasp",_
                                                                                            "testattr", "testattrResult",_
                                                                                            "type", "type-test"_
                                                                                          ))
                                                                                        ace.FormItemLabelEnd
                                                                                        ace.FormItemInput(Array("type", "select"))
                                                                                          ace.SelectInputWithOptions(Array(_
                                                                                            "type", "select",_
                                                                                            "label", "select",_
                                                                                            "id", "selecttestasp"_
                                                                                          ))
                                                                                            ace.SelectOptions(Array(_
                                                                                                "value", "foo",_
                                                                                                "text", "Foo"_
                                                                                            ))
                                                                                            ace.SelectOptions(Array(_
                                                                                                "value", "bar",_
                                                                                                "text", "Bar (selected)",_
                                                                                                "selected", "true"_
                                                                                            ))
                                                                                            ace.SelectOptions(Array(_
                                                                                                "value", "sin",_
                                                                                                "text", "Sin"_
                                                                                            ))
                                                                                            ace.SelectOptions(Array(_
                                                                                                "value", "qua",_
                                                                                                "text", "Qua"_
                                                                                            ))
                                                                                          ace.SelectInputEnd
                                                                                        ace.FormItemInputEnd
                                                                                      ace.FormGroupEnd %>

Manual using an Array for options:


                                                                                      <% ace.FormGroup(Array("type", "select"))
                                                                                        ace.FormItemLabel(Array())
                                                                                          ace.FormLabel(Array(_
                                                                                            "text", "Select",_
                                                                                            "attrFor", "selecttestasp",_
                                                                                            "testattr", "testattrResult",_
                                                                                            "type", "type-test"_
                                                                                          ))
                                                                                        ace.FormItemLabelEnd
                                                                                        ace.FormItemInput(Array("type", "select"))
                                                                                          ace.SelectInputWithOptions(Array(_
                                                                                            "type", "select",_
                                                                                            "label", "select",_
                                                                                            "id", "selecttestasp",_
                                                                                            "selectOptions", (Array(_
                                                                                              (Array(_
                                                                                                "value", "foo",_
                                                                                                "text", "Foo"_
                                                                                              )),_
                                                                                              (Array(_
                                                                                                "value", "bar",_
                                                                                                "text", "Bar (selected)",_
                                                                                                "selected", "true"_
                                                                                              )),_
                                                                                              (Array("value", "sin",_
                                                                                                "text", "Sin"_
                                                                                              )),_
                                                                                              (Array(_
                                                                                                "value", "qua",_
                                                                                                "text", "Qua"_
                                                                                              ))_
                                                                                            ))_
                                                                                          ))
                                                                                        ace.FormItemInputEnd
                                                                                      ace.FormGroupEnd %>
Toggle. Note Toggles use Multi Groups, as they are actually a radio button pair. 

                                                                                          <fieldset class="ace-form-group ace-form-group-toggle">
                                                                                                <legend class="ace-form-item ace-form-item-label"><span>Toggle label</span></legend>
                                                                                                <div class="ace-form-item ace-form-item-input">
                                                                                                      <div class="ace-toggle ace-toggle-icon" id="enabledOff">
                                                                                                        <input checked="checked" id="enabledOffoff" type="radio" name="enabledOff" value="Off">
                                                                                                        <label for="enabledOffoff"><span class="ace-icon ace-icon-control-off"></span><span class="ace-text">Off</span>
                                                                                                        </label>
                                                                                                        <input id="enabledOffon" type="radio" name="enabledOff" value="On">
                                                                                                        <label for="enabledOffon"><span class="ace-icon ace-icon-control-on"></span><span class="ace-text">On</span>
                                                                                                        </label>
                                                                                                      </div>
                                                                                                </div>
                                                                                          </fieldset>

                                                                                      <%
                                                                                        ace.FormGroupMulti(Array(_
                                                                                          "type", "toggle"_
                                                                                        ))
                                                                                          ace.FormItemMultiLabel(Array(_
                                                                                            "label", "Toggle label"_
                                                                                          ))
                                                                                          ace.FormItemMultiLabelEnd
                                                                                          ace.FormItemMultiInput(Array())                  
                                                                                            ace.Toggle(Array(_
                                                                                              "onstatetext", "on",_
                                                                                              "offstatetext", "off",_
                                                                                              "name", "toggleinaform",_
                                                                                              "checkedstate", "off"_
                                                                                            ))
                                                                                          ace.FormItemMultiInputEnd
                                                                                        ace.FormGroupMultiEnd
                                                                                      %>
Date picker 

                                                                                          <div class="ace-form-group ace-form-group-datepicker">
                                                                                                <div class="ace-form-item ace-form-item-label">
                                                                                                      <label class="ace-form-label"><span class="ace-text">Choose date</span>
                                                                                                      </label>
                                                                                                </div>
                                                                                                <div class="ace-form-item ace-form-item-input">
                                                                                                  <div class="ace-datepicker">
                                                                                                    <input id="datepicker" type="date" class="ace-form-input ace-form-input-datepicker ace-form-field-small">
                                                                                                  </div>
                                                                                                </div>
                                                                                          </div>

                                                                                      <%
                                                                                        ace.FormGroup(Array(_
                                                                                          "type", "datepicker"_
                                                                                        ))
                                                                                          ace.FormItemLabel(Array())
                                                                                            ace.FormLabel(Array(_
                                                                                              "text", "Choose date",_ 
                                                                                              "attrFor", "datepickerinaform"_
                                                                                            ))
                                                                                          ace.FormItemLabelEnd
                                                                                          ace.FormItemInput(Array("type", "datepicker"))                  
                                                                                            ace.Datepicker(Array(_
                                                                                              "id", "datepickerinaform"_
                                                                                            ))
                                                                                          ace.FormItemInputEnd
                                                                                        ace.FormGroupEnd
                                                                                      %>

Hidden-type input groups must be the first child within an ACE Form. Note this is for fields which are never displayed; set to type 'hidden'.

 

                                                                                          <div class="ace-form-hidden">
                                                                                                <input class="ace-form-input ace-form-input-hidden" type="hidden" id="idofhiddeninput">
                                                                                                </input>
                                                                                          </div>

                                                                                      <%
                                                                                        ace.FormGroup(Array(_
                                                                                          "type", "hidden"_
                                                                                        ))
                                                                                          ace.FormInput(Array(_
                                                                                            "type", "hidden",_
                                                                                            "name", "hiddeninput",_
                                                                                            "id", "hiddeninput"_
                                                                                          ))
                                                                                        ace.FormGroupEnd
                                                                                      %>

Form groups can be conditionally shown and hidden by setting the aria-hidden attribute to true or false. Avoid other methods including jQuery's show/hide. The ARIA method is better for accessibility and allows conditional styling for ACE.

 

                                                                                          <div class="ace-form-group" aria-hidden="true">
                                                                                          </div>

                                                                                      <%
                                                                                        ace.FormGroup(Array(_
                                                                                          "aria-hidden", "true"_
                                                                                        ))
                                                                                      %>

Subtle Select - currently the only input that supports the 'subtle' form input variant. Used for cases where the full select style is too heavy in context.

 

                                                                                          <label class="ace-form-label ace-assistive" for="subtleselectexample"><span class="ace-text">Label for the select</span>
                                                                                          </label>
                                                                                              <select class="ace-form-input ace-form-input-subtle ace-form-input-select" id="subtleselectexample">
                                                                                                    <option value="00">00</option>
                                                                                                    <option value="01">01</option>
                                                                                                    <option value="02">02</option>
                                                                                              </select>

ASP support forthcoming. As a workaround, use customClass to add ace-form-input-subtle to ace.SelectInputWithOptions.