Microsoft-ui-xaml: Proposal: Checkbox Consistency

[sravya03]

Proposal: Make checkbox/radiobutton visuals used around WinUI controls consistent

Checkbox consistency detailed design PR is created.

Summary

As part of looking into the consistency with closer look, we identified inconsistency we unintentionally introduced over the years. To make sure we can move forward as one, we would like to fix this issue so we are not carrying the debt of inconsistency.

Rationale

• Checkbox Design is inconsistent across the control set. To ensure the same design throughout we should introduce one style.

Scope

| Capability| Priority |
|:--|:-|
| Developers are able to use WinUI2.2* package and without any work, get the new Windows visual style. | Must |
| Developers and end users experience control update that feel coherent with the same controls used by Fabric, Edge, and Xbox. | Should |

*Timing here is not a commitment, but to follow the release cycle. Just using the next version #.

Design details and visuals

This impacts the following controls:

• Checkbox
• Radio button
• TreeView
• ListItem (part of #1090)
• GridView (part of #1090)

Important Notes

Open Questions

[mdtauk]

CheckBox control, CheckBoxes within DataGrid cells, Lists selection Check marks, and flyout menu check marks - will need to differ slightly.

Xbox shows how CheckBox lists could be used for DataGrid cells. Where the whole cell becomes the tap target, and the mark is aligned to the right, with text to the left - as with other cells.

[chigy]

CheckBox control, CheckBoxes within DataGrid cells, Lists selection Check marks, and flyout menu check marks - will need to differ slightly.

@mdtauk , Please take a look at the comps I uploaded.

[mdtauk]

Those borderless Check Boxes will be much easier on the eye for the DataGrids and Lists

---

The TreeView image is a little confusing as it shows both bordered and borderless checkboxes, which will be the default?

---

Some of the checkboxes use a 16px Tick mark, and some use a 14px Tick.

---

The hover "provisional" check mark should probably be at a lower opacity brush, as it is more of a hint.

• The Border on the Checked Hover state makes the control feel cramped, and there is no border on the Radio Button.
• If the border was 1 epx that would help
• Fabric uses lighter and darker shades of the Accent Colour for Pressed and Hover states.

---

The smaller Radio Button bullet is nice, and works in the checked state with a filled circle.

---

Should the disabled selection brushes on the Grid View be the Accent colour? Typical disabled states are in a 40% grey shade. If Active state controls like toggles, radio and check boxes, selections - which use the Accent colour to denote an "activated state" - this should be consistent in all controls right?

[chigy]

@mdtauk, you are right the comp is confusing. After responding to the comment, I went back to design to fix some of the confusion. For example, we are not doing the hover state where it shows the tick mark (#842) as it is not mature enough design. Expect new comp to be uploaded when done.

[chigy]

Status update: Reviewed with WinUI team and there was no immediate concern with the design's plan here. Other than obviously the comp is incorrect...

[chigy]

Status update:

Added visual comps

[mdtauk]

I am curious as to the thinking behind why the GridView checkbox differs from the other CheckBoxes? In that it uses a background colour, without a border?

With a subtle border colour, and a fill you could come up with a single style for Unselected CheckBoxes which would work in Grids, Lists, Trees, Individually and in Groups.

[chigy]

I am curious as to the thinking behind why the GridView checkbox differs from the other CheckBoxes? In that it uses a background colour, without a border?

With a subtle border colour, and a fill you could come up with a single style for Unselected CheckBoxes which would work in Grids, Lists, Trees, Individually and in Groups.

It is because GridView often gets used with images or tiles as the back drop. Border checkbox will not provide enough visibility to the checkbox.

[chigy]

Status update

Checkbox consistency detailed design PR with visual change detail is created.

[chigy]

Status update

Since #953 was approved, doing this change in tandem would ensure system stays intact for coherent design. Reaching out to engineering to ensure this can be done in time.

[chigy]

Status update

We were not able to schedule this item in the next release so postponing to future release. #953 will include doing the hover visual update part of checkbox to ensure consistency.

[mdtauk]

I have been learning Figma and putting together a WinUI design spec so I can try out ideas and hopefully contribute in a more useful way.

I have taken your button spec to heart, with Accent, Filled, Outlined, and Ghost styles for more controls. Looking at the consistency proposal, there seems to be Filled and Outlined styles, so doing full sets of styles/templates for both, and then using the right style for the right use, may be a holistic approach.

[mdtauk]

The checkmark used for the List and Grid View checkboxes, is not using the proper colour for contrast on the Accent Colour.

[chigy]

@mdtauk , #1096 covers changing checkbox at all for List/Grid.

[kaiguo]

ListViewItem and GridViewItem have to wait for WinUI 3.0, tracking it with #1096.