Closed jonnystening closed 5 years ago
This would be a great opportunity to consolidate GUI-checkboxes and GUI-radios. They are 99.9% the same module, implementation only differing by use of input type="checkbox"
vs type="radio"
. Bootstrap's unified (.form-check
) module approach makes sense https://getbootstrap.com/docs/4.1/components/forms/#checkboxes-and-radios.
We could also address the clickable whitespace issue in the current checkbox and radio in block level mode.
This is best handled by using a wrapping div; inline-block label and input as children. With this approach the simple label wrapping method to connect label and input is probably not worthwhile, let's just use the for
attribute as bootstrap do. This is really more correct from a semantics/a11y point of view too; even though it's a little more verbose.
The above considerations and additionally some a11y considerations (https://github.com/WestpacCXTeam/GUI-source/issues/433) will be handled by a brand new module called GUI-form-checks. For details of this project see https://github.com/WestpacCXTeam/GUI-source/issues/436
As per Input Fields (incl. Select inputs) and Input Groups... Radios, Checkboxes and Switches should be block by default.
@justinspencer?
Bootstrap have gone with this approach. I think aligning with this would be beneficial... it'd be more familiar for devs and better suit our upcoming form layout recommendation (stacked label/input).
Checkboxes and radios... https://getbootstrap.com/docs/4.1/components/forms/#checkboxes-and-radios
This would potentially be a breaking change as existing radios & checkboxes are inline-block by default, only becoming block with a
.radio-block
or.checkbox-block
modifier. This new approach would flip this... utilising an inline class wrapper to render the (edge case) current layout.