Taxonomic name: O-FORM-ASSUMPTIONS
v.4.11.0 - Updated 19/07/19.
The assumptions organism helps to alert customers to the key assumptions used in generating their quote so that they understand what the policy parameters are and have the option to accept or reject these assumptions.
- Each assumption should be kept short, clear and concise and provide the right context to what the customer is being quoted for.
- A few key words in each assumption should be bolded to improve scanning and comprehension.
Allow the customer to accept or reject all assumptions at once:
- Currently unable to accept or reject individual assumptions.
Assumptions by default have an orange triangle with an exclamation mark to the left of each assumption:
- If the customer chooses "False", a notification should appear immediately to provide relevant guidance.
- If the customer chooses "True", all orange triangles immediately turn into green circles with ticks.
A keyline is positioned to the left of the assumptions, from the sub-heading to the bottom of the organism to help frame the assumptions and allows for easier scanning:
- The keyline colour will always reflect the colour of the icon to the left of each assumption.
- Contextual help, show/hide or any other organism or module should not be used within the assumptions organism. For any copy that requires further explanation consider placing guidance above or below the organism.
- Assumptions will always have true/false radio buttons.
- The true/false radio buttons will always be preceded by some explanatory text to frame the outcome of their selection.
Notifications and errors
- A red error state displays above the assumptions organism if the customer submits the form without selecting one of the radio buttons. Customers are unable to progress until they make a selection.
Accessibility and screen readers
- Assumptions organism should always be used against a light accent background to allow for easy scanning and readability.
Body copy should always be #444444 regular:
- Key word/s to be highlighted in bold.
Non-JS requirements and considerations
- The left keyline and orange exclamation mark are coloured guide blue #44C0FF and their colour and status do not update upon the customers selection.
- The assumptions organism can only be used within a form journey and only once within a group of related form questions, for example questions about "Your home", "Your vehicles", "Your drivers", "Travellers", etc.
- Multiple instances of an assumption organism can be used on a page.
- In-line notification placed beneath the true/false radio buttons.
All break points
Vertical keyline and icon colours:
- Default and false state: #FFA000.
- True state: #4F9F31.
- Non-JS state: #44C0FF.
- Width = 4px.
- Height = Height of content + 30px (15px top + 15px Bottom) padding.
- H3 sub heading – explanatory text.
- Body copy regular weight – assumptions description.
- Body copy bold weight – assumptions key word/s.
- Body copy – true/false explanatory text.
- True/false radio buttons follow radio button design rules.
Notes for developers
Radios must be contained within their own fieldset and the legend is the question for the group of radios.
Within a group of radios the
name attribute must be common between all the radios, but the
id remains unique to the page.
Always have one of the radios within the group set to
checked when using switches. If the user has not changed the selected radio option, automatically set the first radio to
If the native form validation needs to be disabled set the
novalidate attribute on the form.
To help those using assistive technologies, make sure that success/error messages which need to be announced to users have their aria attributes updated to
Notes for testers
- In this instance the label for the radio option is the wording directly on the right of the radio option. Clicking / pressing the explanitory text for the group of radio options will not transfer focus to any of the radio options like it would for a text input.
- The label should be displayed to the right of the radio button and should activate the radio button when selected (as should the radio button itself).
- It should be really clear which label applies to which radio button by using background shading to group the label and the radio button together.
The following table gives you a quick overview of the CSS classes that can be applied.
||Base style wrapper for form assumptions organism||Yes||
||Wrapper styling for form assumptions content||Yes||
||Styling for form assumptions list||Yes||
||Styling for form assumptions list items||Yes||
||Styling for vertical keyline||Yes||