openui
checkmark for select multiple
For customizable single-select, we have a ::checkmark pseudo-element with its content property set to a checkmark emoji: ✓ U+2713. The unchecked options just have visibility:hidden set on ::checkmark so there is empty space where the checkmark would be.
For multi-select, we could consider having checkboxes, where unchecked options have an empty box and checked options have a box with a checkmark in it. There are a pair of unicode emojis for this (I found in this list):
- U+2610 ☐
- U+2611 ☑
I'm afraid of using these because most fonts don't seem to include a nice rendering of the unchecked checkbox U+2610, which would result in it looking ugly and having different widths for checked and unchecked ones. I think some fonts also render this as a picture of a ballot box with a piece of paper?
We could also solve this by providing our own SVGs, but using SVGs kind of got shot down here, and if we used an SVG in a background-image or something then it wouldn't respond to writing modes, colors, or most properties you could set on it from CSS.
I'm kind of in favor of keeping the single-select behavior of just showing a checkmark for checked ones and nothing for the others, but does anyone have any good ideas?
Some images of the checkbox emojis mentioned above on different platforms:
My linux computer:
iPhone:
Pixel:
I personally think stick with the single select styles and if people want checkboxes etc they can customise it and set a font that works for that use case.
Proposed resolution: Keep the single-select styles which just show a checkmark for selected options and an empty space for not-selected options
The Open UI Community Group just discussed [select] checkmark for select multiple, and agreed to the following:
-
RESOLVED: Keep the single-select styles which just show a checkmark for selected options and an empty space for not-selected options
The full IRC log of that discussion
<keithamus> jarhar: aleventhal gave feedback on my initial impl of select multiple. Instead of checkmarks we should have checkboxes, so options that aren't selected show an empty box so you can more easily tell<keithamus> .. reviewed a bunch of unicode characters (this is what we do for select single) there are some, but they're inconsistently aligned which made me not want to use them
<keithamus> .. I posted images in the issue, on my machine they looked bad.
<masonf> q+
<keithamus> .. so I think we should keep the current thing of the empty space with not selected options and the checkmark unicode for selected options
<una> q+
<keithamus> .. then developers can add their own visuals,
<scott> q+
<keithamus> masonf: +1 to leaving as is, those look ugly and developers would remove them
<masonf> ack mason
<keithamus> .. having as close to single select styles as possible is probably a good thing, you can style things consistently and not have to cover each case
<masonf> ack una
<masonf> ack scott
<keithamus> una: big +1 please don't add the empty checkmark box. Consistency is the best way forward. The existing multiselect does not have additional affordances, we don't need to add those, let it be up to the author.
<keithamus> scott: rational part of me wants to agree with everyone
<keithamus> +1
<frehner> +1
<scott> +1
<jarhar> Proposed resolution: Keep the single-select styles which just show a checkmark for selected options and an empty space for not-selected options
<sarah> +1
<jarhar> RESOLVED: Keep the single-select styles which just show a checkmark for selected options and an empty space for not-selected options
