[checkbox] Add readonly state to checkbox and checkbox-group

[rolfsmeds]

Description

vaadin-checkbox and vaadin-checkbox-group do not have a readonly state.

Expected outcome

Readonly state should be supported to align with other input field components.

[rolfsmeds]

While readonly is clearly not as meaningful a state in a checkbox as it is in e.g. a text field, I do feel that we should consider adding it anyway, because:

1. the Lumo styling is different between disabled and readonly
2. API consistency, making it easier to just iterate over all fields in a form to switch between readonly and edit mode.

[tarekoraby]

While readonly is clearly not as meaningful a state in a checkbox as it is in e.g. a text field

@rolfsmeds: Why do you consider read-only less-meaningful to a checkbox than it is to a text field?

[hnass]

for the look and feel of the application, especially when differentiating between read-UI and edit-UI, this small improvement would help a lot.

[probert94]

The missing readonly support on the client side also has an effect on flow applications: The flow Checkbox has readonly support, but since it is only supported on the server, the new value will be sent to the server and the server sends back the old value. So when I click the checkbox, the toggled value is visible on the client for some time, depending on the speed of the connection.

[nSharifA]

. It's an annoying missing "feature". More and more users reports, the readonly checkbox seems editable, but when they try to edit doesn't do anything besides the click animation. My temporary "fix" is to use the setEnabled API instead and make the disabled label readable with CSS. At least now the checkbox looks not editable, but the label and the state of the checkbox is distinguishable.

[Frettman]

When coming from the Flow-side of things, binding the checkbox as read-only technically works, because its value can't be changed. But the fact that it changes its state and quickly reverts back makes it look editable but broken.

[cdir]

Would it really be that much effort to synchronize the readonly property with an attribute? This would at least give us the possibility to set our own styling.

[hoshie82]

...

        Grid<?> grid = new Grid<>();
        grid.addColumn(LitRenderer.of("<vaadin-checkbox readonly ?checked=${item.active}></vaadin-checkbox>"));
...

would be also really nice...

edit: better ugly workaround (at least seems to work...):

    public static <T> Renderer<T> createCheckboxRenderer(ValueProvider<T, Boolean> valueProvider) {
        return LitRenderer.<T>of("<vaadin-checkbox ?checked=${item.active} onclick='return false;' onkeydown='return false;'></vaadin-checkbox>")
                .withProperty("active", valueProvider);
    }

[probert94]

The usecase @hoshie82 described is also the most important usecase for me. To improve performance of the vaadin-grid, we replaced almost all ComponentRenderers with LitRenderer. Only the checkboxes are still using ComponentRenderer because they don't support the readonly flag.

[timb086]

From a developers point of view it would be consistent, because when using vaadin binder and setting the whole binder to read only, the checkbox is displayed as active, but the value can't be changed. It flickers instead.

In such a case, we would need to exchange the component when toggling between edit and read only mode.

[rolfsmeds]

Ok, let's throw some design ideas out there.

A readonly CheckboxGroup could look something like this:

• Selected checkbox dark gray instead of blue to indicate that it's non-interactive
• Unselected checkboxes are transparent with the dashed outline used in other read-only fields
• Unselected checkbox labels are de-emphasized with --lumo-tertiary-text-color (the contrast is below WCAG limits, but unselected options don't need to be readable so that's ok)

What about standalone Checkboxes?

• Can't use --lumo-tertiary-text-color for the label there, as a standalone non-checked checkbox needs to be legible
• Dilemma: since the unchecked box is below WCAG contrast limits, it's effectively invisible for some users, which makes the whole component look just like a text element. This is bad in itself, but even worse considering it's an unselected value, so a Checkbox like [ ] Has admin permissions will look like Has admin permissions i.e. the opposite of what it should convey to the user.

Strikeout, perhaps?

Opinions welcome.

[Frettman]

No final opinion, just some quick gut reactions:

• Regular and disabled doesn't use two different font colors for selected/unselected. So I think it would be wierd for read-only to do that. And reading what isn't selected could be just as useful as reading what is selected. So I'd preserve good contrast if possible.
• I don't think grouped and standalone checkboxes should behave/look differently. E.g. it could boil down to a question of data model whether CheckboxGroup can be used or not. So even standalone checkboxes might be combined to form a "group".
• Would using the grey of selected checkboxes for the dashed line of unselected checkboxes fix the contrast issue? Might even go darker if necessary to fix the contrast. The difference between selected and unselected would still be clear, I think.

[rolfsmeds]

Good points, thanks!

I do think it's beneficial to have unselected options slightly lower contrast

• To emphasize the selected option a bit, now that there are no colors involved to do that
• To make the unselected options look less clickable

Below: WCAG compliant --lumo-contrast-50pct dashed outline and --lumo-secondary-text-color unselected item label

[juuso-vaadin]

How about changing the checked item from filled to something else?

[juuso-vaadin]

Three more iterations. Maybe going ahead of things but if the fields had a bordered style by default, would the filled style then work for read-only state...

[rolfsmeds]

My worry with the non-filled checked box is that the visual difference to unchecked boxes is so small that it requires a much closer look to see what the selected items are.

[probert94]

The non-filled checkbox with the dashed border would fit the default read-only style of other vaadin components like TextField. Also, I wouldn't give the labels of the unselected checkboxes less contrast, the checkmark in front should be enought to see if it is checked or not.

[knoobie]

read-only v1

This looks really promising and would match the other fields quite well 👍

[rolfsmeds]

Continuing on this (almost exactly a year after I left off), let's look at how others do this:

IBM Carbon

Normal followed by read-only (third one in each group is disabled)

• Unchecked box has fainter border
• Checked box has fainter border and non-inverted colors

SAP Fiori

• Box has the faintest of faint filled backgrounds
• Checkmark is gray instead of blue

Adobe Spectrum

• The... read-only box has a microscopically stronger border color?

(Would have added more examples, but these were the only ones I could find. Feel free to add more in the comments!)

So... ok, Carbon is really the only good example to take inspiration from here. I guess the bar is pretty low for us. @jouni did you have some ideas for this?

[web-padawan]

Prototype PR: https://github.com/vaadin/web-components/pull/7199. Themes still need final design decision (for Lumo, I used --lumo-contrast-50pct - see visual tests).

[rolfsmeds]

Acceptance Criteria for this feature: https://github.com/vaadin/platform/issues/5178

[rolfsmeds]

Here's the CSS I used to prototype the styling, in case it comes in handy for whoever implements this:

vaadin-checkbox.readonly, vaadin-checkbox-group.readonly > vaadin-checkbox {
    /* Remove optional border when readonly */
    &::part(checkbox) {
        --_input-border-width: 0;
    }

    &:not([checked],[indeterminate]) {
        /* Set label color to secondary text when readonly unchecked */
        color: var(--lumo-secondary-text-color);

        /* Set dashed border and transparent background when readonly unchecked */
        &::part(checkbox) {
            background: transparent;
        }

        &::part(checkbox)::after {
            border: 1px dashed var(--lumo-contrast-50pct);
            opacity: 1;
            display: block;
            content: '';
            width: 100%;
            height: 100%;
            border-radius: inherit;
            box-sizing: border-box;
            top: 0;
            left: 0;    
        }
    }
    /* Set gray box background when readonly checked */
    &[checked], &[indeterminate] {
        &::part(checkbox) {
            background-color: var(--lumo-contrast-70pct);
        }
    }
}

(Note that it doesn't disable hover and active effects, however.)