Error variant for the Checkbox component

[GomezIvann]

The majority of our form components (Text Input, Textarea, Radio Group, File Input, etc.) have an error state or variant and an opinion on how and where to display the error messages. The only one remaining is the Checkbox, which currently doesn't provide a design opinion or solution for that use case. My question is:

• Does this variant make sense?
• If so, do we also need to provide an opinion on the error message? It would make more sense if the component were a group of checkboxes (just like the radio group), but being a single one... I'm not sure.

Proposal

[Jialecl]

Regarding whether the checkbox should have an error variant, I believe it should, especially considering that a checkbox can be mandatory.
Also, talking about the single checkbox, I think it makes sense to have a single checkbox in many cases. The main example I can think of it's the checkbox used to accept terms and contidions that we see everywhere.

[kukoc]

I also agree. The use case shared by Jiale is a perfect example. More common is the scenario when it's been mistakenly not selected rather than a checkbox that has been selected and it shouldn't. I'm not sure if we need both variants. But both could happen.

[GomezIvann]

I didn't mean that the single checkbox wasn't important. What I wanted to raise is if the error variant/use case with an error message makes sense in a single checkbox like the one you mentioned.

And regarding the Checkbox group, I think it's a very good spot for a new Halstack component.

[jsuarezgonz]

I think it makes sense to have this variant in the component; reviewing other design systems many of them have this variant, although many others don´t.

What is not so standardized is to show the error message, for me it also makes sense to show it as we do with other components.
Here are some references to other design systems:

Twilio
Carbon
Spectrum
Seek
Gestalt

[raquelarrojo]

I agree. Checkbox group is a component we need in our Design System to allow users to select multiple items, as we have in the Radio Group, so it would give us consistency.

Also I think that the error should be shown in both variants, single checkbox and checkbox group. I don't see a major reason so that we do not add the error in the single checkbox.

[kukoc]

@lcordobapuerto , could you please add your inputs?

[lcordobapuerto]

As Jiale said, having a error variant for the checkbox (both selected and unselected) is justified by some use cases, the terms and conditions checkbox is a very good example. Another use case where we could find an error variant for a selected checkbox could be when introducing one's birth date in a form, being under 18 yeras old, and selecting the checkbox that says: "I am +18 years old". In that case, we would need to show that the checkbox selected is wrong and display an error message explaining why.

As to checkbox group, I agree with the rest of the team that Halstack will need that component to allow users to select more than one option (in the end, that's the main use case for checkbox, to be able to select more than one option, in contrast with Radio group, which only lets the user select a single option).

[kukoc]

I've been checking other DS like carbon and they don't have a checkbox group:

https://react.carbondesignsystem.com/?path=/docs/components-checkbox--overview

I agree that it could help to handle a field that accepts multivalues as a list of values. But is it worth to maintain this component? If it's a list of different properties grouped under a title or label, it could be just a pattern.

[GomezIvann]

Other design systems don't implement a Checkbox group because it's a big assumption. What I mean by this is that checkboxes can go alone but radios do not. They should be a choice among others. In any case, a Checkbox Group doesn't necessarily need to be an actual implementation, it can be a design opinion in our guidelines.

[kukoc]

I agree with you. It could be documented in our guidelines and potentially a pattern. However, you were proposing earlier in this discussion to create the Checkbox group as a component.