Forms

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 %>
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)

Form groups typically contain two form items, the first set to type 'label' and the second set to type 'input' (because they contain the label and input elements).

Type can match any form input type (text, checkbox etc); and a limited range of non-form content (expander-panel, message, table, tree).

 

                                                                              <div class="ace-form-group ace-form-group-text">
                                                                                    <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())
                                                                            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)

Multi input group uses fieldset to group multiple inputs and their labels; and the legend to describe the purpose of the inputs as a whole. Multi input groups hold multiple (more than one) form inputs.

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

 

                                                                              <fieldset class="ace-form-group ace-form-group-checkbox">
                                                                                    <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", "checkbox"_
                                                                          ))
                                                                            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-text">
                                                                                    <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", "input"))
                                                                              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


                                                                          <% 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


                                                                          <% 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">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 %>
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.