What is the "most correct" way to build a checkbox list field?

1 Answer 178 Views
Checkbox Form
Nick
Top achievements
Rank 1
Nick asked on 01 Jul 2023, 03:00 AM | edited on 01 Jul 2023, 03:02 AM

I have a requirement to include a checkbox list field on a form--one field with N number of checkboxes. The value of the "field" would be a comma-delimited list of the checked values. The field can optionally be required, too, meaning at least one of the N checkboxes must be checked before the field is considered valid.  For example:

There isn't a CheckboxGroup equivalent to the RadioGroup (though people have asked about it). And the RadioGroup component doesn't seem to have a "checkbox mode."

Is there a decent way to build a checkbox list field using KendoReact? If so, how? I've toyed with the following options:

  • Using an array map function within the form to render a series of <Field ... component={Checkbox} /> instances.
    • This works, but validation is a challenge since each Field has its own validation message rather than the collective field having a singular validation message.
  • Building a custom field, <Field ... component={MyCheckboxList} />, where MyCheckboxList includes several Checkbox components. This is based on the Custom Components documentation. This seems incorrect since <Field /> is meant to hold one and only one form input field not several.

    I'd prefer not to hand-roll a checkbox list field without using KendoReact. I can't be the first KendoReact user to need a checkbox list on a form...right? 😀

    1 Answer, 1 is accepted

    Sort by
    0
    Accepted
    Konstantin Dikov
    Telerik team
    answered on 03 Jul 2023, 10:13 AM

    Hello Nick,

    Although that we do not have component that we can suggest for the requirement that you have, using a custom component would be the way to go. Note that you can have complex custom component for the Field and still handle its value through the fieldRenderProps.onChange.

    For your convenience I have implement such custom component that works with a string value where each value is separated by comma:

    I have also added a required field validation and a label.

    Please give this a try and let us know if further questions arise. 

     

    Regards,
    Konstantin Dikov
    Progress Telerik

    As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.
    Nick
    Top achievements
    Rank 1
    commented on 03 Jul 2023, 02:06 PM

    Thank you, @Konstantin! I'll take a look and will follow up with any other questions. 🙏
    Nick
    Top achievements
    Rank 1
    commented on 03 Jul 2023, 03:00 PM

    @Konstantin I adapted your code sample to my solution and it's looking great. Appreciate the reply. I've marked the question as answered. ✅
    Maşallah
    Top achievements
    Rank 1
    commented on 26 Nov 2023, 07:46 AM

    Thanks @Konstantin, you saved my day  🙏 🙏 🙏
    Tags
    Checkbox Form
    Asked by
    Nick
    Top achievements
    Rank 1
    Answers by
    Konstantin Dikov
    Telerik team
    Share this question
    or