Validation checklist
Live demo
“Active” field state
- Valid checklist item
- Invalid checklist item
- Another invalid checklist item
“Inactive with error” field state
- Valid checklist item
- Invalid checklist item
- Another invalid checklist item
Design
Usage
Password field should update to show the rules as the user types my password so I can update/change my password easily.
This will be used in the instance of a new user signing up and setting their new password or an existing user resetting their password if they have forgotten it.
Structure
The Primary password rules should be shown beneath the password field in a similar way to the helper text. The Primary rules should be displayed in a checklist format (with varying states of icons at 20px). Please follow the spacing as per the designs.
The secondary password rules should be displayed in an Alert box under the password field and under the Primary rules (if shown together). Please follow the spacing as per the designs.
In the instance of multiple secondary rules, they should always be shown the order provided.
Interaction
As the user interacts with the password field and it changes to active state, the primary checklist should be shown. As the user types and the password rules are met, they should update from incomplete icons to complete icons.
As I am typing, primary checklist rules will toggle between incomplete and complete states.
If a user clicks out of the password field (including in another field or button) and I have correctly met all password requirements, primary checklist should be hidden.
If a user clicks out of the password field (including in another field or button) before meeting all password requirements, they should be shown a primary and/or secondary error.
If the error is primary, then the error should be shown in the checklist.
The incomplete rule should change colour to Alert-base and
If the error is secondary, then it should display in an external alert box.
Transition to display a state change with a 0.25 ease.
Animations to be a Cubic Ease-out at 250ms
Accessibility
Input field relies on the standard text field component.
Text size of the Primary rules checklist should follow the standard Field Helper style
The visual style for Secondary rules error box should follow the set visual as the error box.
For password creation we should be following the Version 1 style with bullet points.
If there are specific ARIA attributes to help users, these should be applied.
Code
import { ValidationChecklist } from '@shieldpay/bumblebee/validation-checklist'; <ValidationChecklist displayState="error" items={[ { valid: true, text: 'Valid checklist item', }, { valid: false, text: 'Invalid checklist item', }, { valid: false, text: 'Another invalid checklist item', }, ]} />;