Checkbox component in Office UI Fabric
A check box is a UI element that allows users to select or clear options in add-ins. Use check boxes to allow users to select among options. Additionally, a check box may be paired with a related control. When the check box is selected or cleared, the behavior of the related control changes. For example, the related control may toggle between the visible or hidden states.
Example: Check box in a task pane
|Use check boxes to indicate status.
||Don’t use check boxes to show/indicate an action.
|Use multiple check boxes when users can select multiple options, and the options are not mutually exclusive.||Don’t use a check box when users can choose only one option. When selecting only one option is required, use radio buttons.|
|Allow users to choose any combination of options when several check boxes are grouped together.||Don't put two groups of check boxes next to each other. Separate the two groups with labels.|
|Use a single check box for a secondary setting. For example, the Remember me? check box is a secondary setting used in a sign-in scenario.||Don’t use check boxes to turn settings on or off. To change between an on or off state, use a toggle.|
|Uncontrolled check box||Use as the default check box state.|
|Uncontrolled check box with default checked true||Use when the check box instance maintains its own state.|
|Disabled uncontrolled check box with default checked true||Disabled state of the check box.|
|Controlled check box||The checked state of this check box is decided at another location in your UI. In this scenario, the correct value is passed to the check box by an onChange event and re-rendering of the UI.|