Radio group needs support for the "required"-attribute

[oliveratgithub]

Same as for sl-input: the sl-radio-group should support the required-attribute, and hence also be checked with the default validation within sl-form.

[claviska]

I was wondering how this would work in HTML and, although a bit strange, it does seem to work.

https://jsfiddle.net/snp7mefg/

This will be more explicit in Shoelace, since the required can attach to the radio group.

[Trendy]

You could add a required attribute to the sl-radio, pass that to the underlying input and handle validation using that single input, controlled by sl-radio-group?

This would be easier if Safari would get off it's bum and implement ElementInternals already 😞

[ErikOnBike]

@Trendy I'm not sure if having a required on a sl-radio would be correct. The reason is that you normally select a single sl-radio from a group. So setting them all to required is kind of 'impossible' since only one can be checked ;-). Setting this on the sl-radio-group seems more logical, but does require some mechanism to show what element is 'not valid' when reporting on the fact that no sl-radio is selected within a group. Cory shows an example of how it might be shown (on the first element), but the question is whether that is the preferred way of doing this.

[claviska]

What @Trendy is suggesting is more aligned with HTML, although it does feel weird since the native radio group is inferred by matching name attributes and we don't have access to it. Furthermore, the presence of one required attribute on any radio seems to signal that it's required.

https://jsfiddle.net/snp7mefg/

Shifting required, value, and validity methods to the Radio Group doesn't mimic the native behavior, but that's OK because it improves the API and aligns with the project's philosophy regarding native elements.

TL;DR – let's not rebuild HTML elements. Let's build better ones.

Another question is: how will checked work with Radio? Do we eliminate it from the public API and rely solely on the Radio Group's value to determine which one is checked?

Lots to think about here.

[Trendy]

@ErikOnBike Adding the required attribute to sl-radio would be closer to what the browser does with it's input elements (assuming the validity of the group would be handled by sl-radio-group). The browser associates all the radios by name, and if any of them are required, it requires just one of the group to be selected: https://jsfiddle.net/7vsug9e1/

In Chrome it always places the error message on the first input it finds in the group, which is why I suggested sl-radio-group just uses the first sl-radio in the group to handle validity.

Edit: Sorry for repeating anything from the comment @claviska made, I was messing with that fiddle a little too long 😆

[ErikOnBike]

I see the point. I'm with Cory in hoping that we can create better ones. Maybe we can make it such that when a sl-radio is set to required it will make the (parent) sl-radio-group required. That at least mimics the behaviour of the current HTML implementation. Further asking for the required status of a single sl-radio will answer (again) it's parent's value. And maybe checked can also be delegated to the parent allowing a consistent view of the world. Does that sound reasonable? (going AFK)