Checkbox

[Courtny]

A checkable input that visually shows if an option is true or false.

[homing1]

@jdanyow has a proposal for removing the current custom checkbox markup in favor of using the browser's default checkbox with the background color set by the accent-color property. We would like to get input from design.

:root {
 accent-color: var(--theme-primary-base);
}

.checkbox2 {
 display: inline-flex;
 align-items: center;
 gap: 0.1875em;
}

<label class="checkbox2"><input type="checkbox"> Hello world</label>

Here's a codepen to play with: https://codepen.io/homing1/pen/mdBzRLV

• theming doesn't work well in the codepen, can test locally.

Some implications:

• The checkmark color will be defined by the accent color/browser. This also affect other input types such as radio and range.
• There will be a default subtle background color change on hover checked, but looks ok.
• We would lose the grey checkmark on hover unchecked.

[mjlawson84]

I am personally not a fan of browser based UI elements. In situations where you have a lot of elements on the same screen, say a large form, the differences in styling become very apparent

[paigebaxter]

Great work on this Ming. I think the only feedback I have on this is the hover unchecked state. The hover state on my end is barely visible. I do think the checkmark on the custom checkbox is ideal, but if we go with the version you created is there any way we can add a grey background color to the checkbox on hover similar to these examples?

[homing1]

@paigebaxter It doesn't seem like we would be able to override the styling in any way except for the size of the box. The normal border and background-color properties doesn't seem to apply. We could override the styling for elements around the checkbox (i.e adding a background color to the entire label on hover), but that's not ideal either. Unfortunately, the tradeoff here is less CSS to maintain at the expense of styling and perhaps UX.

[mjlawson84]

@homing1 I completely see the value in wanting to decrease the amount of code, but it should not come at the cost of experience and brand uniformity

[homing1]

@mjlawson84 I totally agree. We won't be going with this approach.

[homing1]

@mjlawson84 @paigebaxter Thanks for your input!

Another question: We have a single use case of checkboxes with a secondary color shown below. It is likely something required by design at the time of creation. It's not included in the Figma though.

https://docs.microsoft.com/en-us/samples/browse/?products=dynamics-365&expanded=dynamics-365

I noticed that it fails the required color contrast ratio with light theme, so we should use a different color.

I'm assuming that the secondary color is something that we want to keep? If so, would $palette-grey-90: #505050 work?

[paigebaxter]

Hi @homing1. I personally think the #505050 background color with the white check works. Thank you for providing an example.

[mjlawson84]

I agree with @paigebaxter , visually I think that makes sense. Great work @homing1

[HengamehJam]

Hi @homing1. I agree with you and @paigebaxter. If we need to keep the secondary color, I think #505050 has enough contrast with the theme.