ACE Labs feature: this element is under development and the API is not bound by SemVer. Watch the changelog!

Design

When designing forms, it is often useful to hide a set of controls until the user actually needs them. This declutters the interface and draws attention to the additional form inputs when they are revealed.

To support this, ACE supports an Auto-reveal feature on checkboxes, radio buttons and Toggles. When set, content can be revealed or hidden when a certain item is selected.

Data room status

Code

There are two parts to using auto-reveal:

  1. Set an attribute on the trigger element (checkbox, radio or Toggle), which includes the selector string which locates the element(s) you want to show or hide.
    • To show content while the trigger is checked, use data-ace-reveal-on
    • To show content while the trigger is NOT checked, use data-ace-reveal-off
  2. Set the initial shown or hidden state on the target content using aria-hidden set to true or false.
Example Element Code
Reveal On
Reveal when on - show the related content when the trigger element is checked.

Set the attribute data-ace-reveal-on with the selector for the element to show or hide.


                                                                                          <div class="ace-form-input-radio-set">
                                                                                                <input class="ace-form-input ace-form-input-radio" type="radio" data-ace-reveal-on="#autoreveal-target" name="ar-radio" id="ar-radio1">
                                                                                                </input>
                                                                                                <label class="ace-form-label" for="ar-radio1"><span class="ace-text">Label text</span>
                                                                                                </label>
                                                                                          </div>

                                                                                          <div class="ace-form-subitem" aria-hidden="true" id="example-ar-radio-revealontarget">
                                                                                            <!-- This is revealed when the second radio button is selected.-->
                                                                                          </div>

In the short term, use custom attributes to set the Auto-reveal and aria-hidden attributes.
Reveal On

This should be revealed when the second radio button is NOT selected.

 Reveal when off - show the related content when the trigger element is not checked. 

                                                                                          <div class="ace-form-input-radio-set">
                                                                                                <input class="ace-form-input ace-form-input-radio" type="radio" data-ace-reveal-off="#autoreveal-target" name="ar-radio" id="ar-radio1">
                                                                                                </input>
                                                                                                <label class="ace-form-label" for="ar-radio1"><span class="ace-text">Label text</span>
                                                                                                </label>
                                                                                          </div>

                                                                                          <div class="ace-form-subitem" aria-hidden="false" id="autoreveal-target">
                                                                                            <!-- This is revealed when the second radio button is NOT selected.-->
                                                                                          </div>

In the short term, use custom attributes to set the Auto-reveal and aria-hidden attributes.