Taxonomic name: O-PROGRESSIVE-DISCLOSURE
v.4.8.0 - Updated 29/03/19.
For use within forms to reveal nested questions and provide positive friction in a user's journey.
- Progressive disclosure sits 15px below the form component that triggered it
- The background colour of the progressive disclosure section is #EEEEEE. When used on a grey background the progressive disclosure background colour is #FFFFFF
- The green line (#4F9F31) at the top of progressive disclosure is 2px in weight and has an arrow that points down which is always horizontally centred
- The colour inside the arrow always matches the page/section background
- The padding within progressive disclosure is 20px top, left and right and 30px at the bottom (technically the top form component sits 30px from the flat green line but 20px from the arrow).
- All form components have the same vertical spacing rules as usual (30px between)
- Progressive disclosure always appears below the form component that triggers it
- Content that appears after progressive disclosure is spaced 30px away from the bottom of the box
- Can only be used on white and light grey backgrounds (#FFFFFF - white, #EEEEEE - lightest grey, #CCCCCC - light grey).
- Don't use on accent colours
- Don't use within cards
- Note: Nested content is not indented further
- Mobile: Progressive disclosure extends to full width of the browser, all other structure rules still apply
- Non-JS: When JS is disabled notifications appear to guide the user. They use the new notification pattern and appear below the question that has been answered. Spacing above and below is 15px.
Currently only for use with:
- Radio single select cards (all versions without any sub form fields)
- Checkbox toggle
- Single checkbox
- Single checkbox within checkbox group e.g. 'other' option
- Follows standard rules for content within progressive disclosure
Non-JS requirements and considerations
We are providing two options for non-JS to give you the flexibility to build as you see fit. The preferred UX approach is option 1, but if your project doesn't have the capabilities to build the pages up server-side, then option 2 is available. It's important that, if you use option 2, you keep your form content minimal.
Option 1 - Server-side approach - The journey is built up server-side, with buttons reloading the page with the next set of relevant questions when triggered. Included in this would be in-page anchoring to automatically take you to the next set of questions.
- A page that contains progressive disclosure loads all the content up to the form component that triggers further questions
- A 'Next' button is positioned after that form component
- The page reloads with the new questions revealed and auto scrolls to an anchor point above the trigger question.
- A notification is visible between the trigger question and the revealed questions to guide the user on what might happen if the answer above is changed.
- Any further nested questions are revealed in the same way
- If there are no further progressive disclosure questions the rest of the page content is loaded and the user can proceed
Caution: Be mindful of the length of your question sets - even when JS is available, you might see some of the non-JS detail before the script loads, which could be confusing to the user; shorter question sets will minimise this effect.
- Animation of progressive disclosure starts when the triggers animation stops
- All animations have an ease in and out
- Green line and arrow fade in over 0.3 seconds at the same time as the background colour fades in and extends to the desired height for whatever amount of questions are revealed
- Each form question revealed fades in over 0.5 seconds (starting from the top) and is staggered by 0.1 seconds to the end of the one that appears before
- If there are a lot of questions, the background fade in and height grow speed changes; rule of thumb is 0.1 second for each form component (so 3 questions would mean 0.3 seconds)
- The same animation rules apply for nested content
- When selecting a question that closes progressive disclosure all form components, green line and background colour and height fade out over 0.3 seconds
Option 1 - Server-side approach
Step two - errored
Option 2 - Client-side approach
Notes for developers
To setup the client-side progressive disclosure, include
data-module="o-progressive-disclosure" on the from row for the king question. On any inputs/options for that king question that are to open a progressive disclosure area, add the attribute
data-disclosure with the value being the id for the progressive disclosure area, eg
data-disclosure="level_1" to link to the progressive disclosure with
All inputs/options within a king question must have the
value attribute set, even if it is left empty.
The first row or additional content area inside a top level progressive disclosure must have its top margin removed.
The last row or additional content area inside a top level progressive disclosure must have its bottom margin removed.
Any sub-disclosure areas can be set up in the same way but with no margin resets.
Notes for testers
Segemented control example
<fieldset> <legend>...</legend> <fieldset class="m-form-row m-form-row--disclosure [ Modifiers ]" role="radiogroup" data-module="o-progressive-disclosure"> <legend class="a-label">...</legend> <div class="m-form-row__content"> <ul class="m-radio-group m-radio-group--2" data-module="m-radio-segmented"> <li class="m-radio-group__item"> <label class="a-radio" for="..."> <input class="a-radio__input" type="radio" name="..." id="..." value="..." data-disclosure="..." /> <span class="a-radio__label"><span class="a-radio__label-inner">...</span></span> <span class="a-radio__ui"></span> </label> </li> <li class="m-radio-group__item"> <label class="a-radio" for="..."> <input class="a-radio__input" type="radio" name="..." id="..." value="..." /> <span class="a-radio__label"><span class="a-radio__label-inner">...</span></span> <span class="a-radio__ui"></span> </label> </li> </ul> </div> </fieldset> <div class="o-progressive-disclosure [ Modifiers ]" id="..."> <div class="o-progressive-disclosure__message m-card m-card-notification m-card-notification--neutral t-accent-light t-accent-light--white" role="status"> <div class="m-card-content"> <p>...</p> </div> </div> <div class="o-progressive-disclosure-container"> <fieldset> <legend>...</legend> <div class="m-form-row m-form-row--full-width u-margin--top-none"> ... </div> ... <div class="o-progressive-disclosure-container__additional-content"> <!-- Any additional content that is required --> </div> <div class="m-form-row m-form-row--full-width u-margin--bottom-none"> ... </div> </fieldset> </div> </div> <div class="m-form-row"> <button class="a-button a-button--primary a-button--icon a-button--next" type="submit"><span class="a-button__inner">...</span></button> </div> </fieldset>
<div class="m-form-row m-form-row--disclosure [ Modifiers ]" data-module="o-progressive-disclosure"> <label class="a-label" for="...">...</label> <div class="m-form-row__content"> <span class="a-dropdown"> <select id="..." class="a-dropdown__select"> <option value="">Please select</option> <optgroup label="..."> <option value="..." data-disclosure="...">...</option> <option value="...">...</option> ... </optgroup> <option value="..." data-disclosure="...">...</option> <option value="...">...</option> ... </select> <span class="a-dropdown__ui"></span> </span> </div> </div> ...
The following table gives you a quick overview of the CSS classes that can be applied.
||Base modifier for the king question||Yes||
||To be applied to an question that had a progressive disclosure area associated to it|
||Base style for the progressive disclosure area||Yes||
||Modifer to make the disclosure area display full width the same as the form rows||
||Modifier style for the notification message for the progressive disclosure area||Yes||
||Must be at the top of the progressive disclosure area before the
||Base style for the content container within the progressive disclosure area||Yes||
||Base style container for general content that is not part of a form row||