| RHo | |
| Apr 20 2021, 7:15 PM |
| F34429489: Screenshot 2021-04-27 at 11.07.25.png | |
| Apr 27 2021, 9:31 AM |
| F34429484: Screenshot 2021-04-27 at 11.06.35.png | |
| Apr 27 2021, 9:31 AM |
| F34429486: Screenshot 2021-04-27 at 11.07.12.png | |
| Apr 27 2021, 9:31 AM |
| F34408811: image.png | |
| Apr 20 2021, 7:15 PM |
| F34408813: image.png | |
| Apr 20 2021, 7:15 PM |
Define and add form layout guidelines to the DSG.
Review and standardise guidelines for placement of form elements in a page, including (but not limited to):
Example form layout - Special:Preferences
Desktop  | Mobile  |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | None | T277047 Design inventory of Wikiverse (Codex design system, OOUI, MediaWiki widgets) UI components | |||
| Duplicate | None | T280724 Add form layout guidelines to DSG |
Adding @KieranMcCann as this was from your initial audit. Plan is to add this as a subtask to the inventory task T277047
I'd suggest adding a fifth point to this ticket if you agree: Position of the required fields' indicator.
In OOUI, the only components that display a requirement indicator are input fields. They do so by including an asterisk inside the field. The question here is: why is the same decision not consistently applied to other input elements such as dropdowns in OOUI? And, how would this approach work with smaller fields such as number inputs? What about binary inputs?
We could maybe consider following the common recommendation and consistently position the requirement indicator next to the labels of required form elements, regardless of their type. Am I missing an important reason not to do so?
Thanks @Sarai-WMDE - agree this is a good point to add as part of the task, I'll update the description.
In OOUI, the only components that display a requirement indicator are input fields. They do so by including an asterisk inside the field. The question here is: why is the same decision not consistently applied to other input elements such as dropdowns in OOUI? And, how would this approach work with smaller fields such as number inputs? What about binary inputs?
We could maybe consider following the common recommendation and consistently position the requirement indicator next to the labels of required form elements, regardless of their type. Am I missing an important reason not to do so?
One clarification would be for radio and checkbox form elements that the indicator is at the label for the whole group. This is because the label element is the content of individual checkboxes and radios (per your example above F34429486, 'RadioInputWidget (required)` is the option being selected, so having the "required" indicator there is then likely misleading that a particular option is mandatory.
Thanks for updating the task description, Rita!
One clarification would be for radio and checkbox form elements that the indicator is at the label for the whole group. This is because the label element is the content of individual checkboxes and radios (per your example above F34429486, 'RadioInputWidget (required)` is the option being selected, so having the "required" indicator there is then likely misleading that a particular option is mandatory.
Of course, this makes complete sense. That single radio button was just not the right example. I didn't mean to be misleading, sorry. Regarding checkboxes, though, they could be used as individual elements of compulsory selection (e.g. the terms and conditions kind of situation), so maybe in that case an individual indicator might be needed.