[Bug]: The "required" attribute on checkbox is broken

[mtas-test]

Package

react

Package version

8.12.7

React version

16.14.0

Environment

web

Current Behavior

Adding the "required" attribute doesn't enforce a required behavior. I couldn't see a red (*) beside the label or checkbox component.

Expected Behavior

Adding the "required" attribute should enforce a required behavior and show a red (*) beside the checkbox/label

Reproduction

https://codepen.io/pen

Steps to reproduce

Go to https://developer.microsoft.com/en-us/fluentui#/controls/web/checkbox Click on any "Export to codepen" https://codepen.io/pen Add "required" to any Checkbox component (Example: ) Observe that there is no red (*) and the "required" behavior is not enforced

Are you reporting an Accessibility issue?

None

Suggested severity

High - No workaround

Products/sites affected

account.microsoft.com/privacy

Are you willing to submit a PR to fix?

no

Validations

• [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [x] The provided reproduction is a minimal reproducible example of the bug.

[smhigley]

@mtas-test thanks for filing the issue! It looks like it probably would have been a good idea to make a required v8 Checkbox label style, but unfortunately adding one now would be a breaking change for v8. I have made a Codepen to demonstrate how to make your own custom required "*" style that matches the one on Textfield: https://codepen.io/smhigley/pen/JjgZWXa?editors=1010

I don't really know what you mean by enforcing required behavior -- we don't provide out-of-the-box form validation in Fluent, that is generally left up to product teams. Setting the required attribute on the Fluent Checkbox does actually set the native required HTML attribute on the underlying <input type="checkbox">, which will trigger native browser validation on the checkbox on form submit, if you're not turning that off. Even if native validation is not used, setting required will provide the required semantics to show that the checkbox is required to e.g. screen reader users.

Hope that helps! Feel free to reach out with any other questions.