-
Notifications
You must be signed in to change notification settings - Fork 33
Update pattern for required fields to use tags #2919
Copy link
Copy link
Closed as duplicate
Labels
area/validationrelated to form validation rules/messagesrelated to form validation rules/messagessquad/utformingIssues that belongs to the named squad.Issues that belongs to the named squad.status/for-considerationIssues that will be considered for future deliveriesIssues that will be considered for future deliveriesuxNeeds some love from a UX resourceNeeds some love from a UX resource
Description
Activity
Metadata
Metadata
Assignees
Labels
area/validationrelated to form validation rules/messagesrelated to form validation rules/messagessquad/utformingIssues that belongs to the named squad.Issues that belongs to the named squad.status/for-considerationIssues that will be considered for future deliveriesIssues that will be considered for future deliveriesuxNeeds some love from a UX resourceNeeds some love from a UX resource
Type
Projects
- StatusShow more project fields✅ Done
Our current pattern for displaying required fields is not recommended by the Design System.
They have documented a preferred pattern here that uses a tag component to display what fields are required and which are not.
This is pattern we should implement in our forms in order to keep up to date with both best practices and to ensure a consistent user experience across our products.
Key takeaways
Single question per page
The description in the question should let the user know if the field is required or not. No need for additional marking.
Multiple questions - all are required
In the case of having multiple required fields on a page, we should inform the user by displaying a tag or marking at the top of the page. We should recommend avoiding mixing required and not required fields on the same page.
Multiple questions - both required and not required
In the case of having multiple questions per page, each question should be marked if it is required or not. The design system suggests using a tag-component for example.