[css-forms-1] border radius on form controls (feedback)

[alexreardon]

I am a huge fan of this proposal!

I had some thoughts I thought I would pass along about the usage of default border radius on some controls

• buttons have a rounded border radius to indicate they are pressable
• color inputs are rounded as they are also a pressable control which shows a popup
• select is also rounded as it is a pressable that shows a popup

Thoughts of mine:

• I am not sure if the switch and checkbox inputs should also be rounded as they are "pressable" controls
• That said, those controls don't show a popup, so perhaps keeping them square is appropriate
• The switch in it's current form feels a bit off to me as a default (that's just one persons subjective view though!)

[myakura]

for switch and range control tshey're planning to round the thumbs #12267

[nt1m]

We're planning to round the switches / thumbs as @myakura mentioned (we should probably resolve on that and update the screenshots).

Checkboxes getting a round corners is an interesting suggestion, given checkboxes could be considered as buttons (which do have rounded corners to differentiate them from text inputs). Checkboxes have not always gotten round corners in design trends, so I'm torn about having one more thing to override. I guess this is a dilemma between design principles 5.1/5.2 and 4.1

[nt1m]

cc @lukewarlow

[lukewarlow]

One point to argue against rounding checkboxes, part of the differentiation between radios and checkboxes is radios are round and checkboxes are square, I worry that slightly rounding checkboxes might muddy that a bit.

I would say the rounding would have to be 0.3em as an absolute maximum for checkboxes.

To clarify I'm talking about defaults.

[kbabbitt]

Not disagreeing with Luke's point about differentiation, but I have seen rounded checkboxes used. Here's an example from https://to-do.office.com, and a quick search turned up other to-do sites which also use them: