How to make Select or Radio components required

[esaramago]

Describe your question or request

Native select and input elements accept a required attribute.
It seems that required attribute doesn't have any effect on webcoreui's Select and Radio.
Which is the correct way to make them required?

[Frontendland]

Hi @esaramago,

Thank you for reaching out! You can use the required attribute on the Radio component:

<Radio
    items={[
        { label: 'Small', value: 'sm' },
        { label: 'Medium', value: 'md', selected: true },
        { label: 'Large', value: 'lg' }
    ]}
    name="radio"
    required={true}
/>

This will add a required attribute to all inputs. We'll introduce a change in our next version to also allow specifying the required attribute on individual items. For the Select component, it seems that the required attribute is not forwarded correctly; we'll include a bugfix for that in our next release. In the meantime, you can attach a data-required attribute to the component and use that in your own validation setup.

<Select
    name="astro-preview"
    itemGroups={listWithGroups}
    data-required={true}
/>

We'll keep you posted on this issue when a fix is available for using native required for Select.

[Frontendland]

Hi @esaramago,

We prepared a fix for the next release. If this is an urgent fix, you can opt into an early version of the next release by running the following command:

npm i webcoreui@1.5.0-0

You'll be able to use required on Select and use item[x].required on Radio.

[esaramago]

It is not urgent.
Thank you so much for your fast response, @Frontendland!