Internal issue 3162 - The required prop on ICDS form fields should prevent the form submitting if the field is empty

Nobody has claimed this yet.

If an ICDS form field (e.g. text field, select) is used in a semantic form, when the required prop is set, it should prevent the form submitting if the field is empty, as per native HTML behaviour.

The following stackblitz has a demo: [https://stackblitz.com/edit/1mi6c2f1?file=src%2Fapp.tsx&hideExplorer=1](https://stackblitz.com/edit/1mi6c2f1?file=src%2Fapp.tsx&hideExplorer=1)

It contains a form with one ICDS required text field and one HTML input with the required attribute. If you leave the html input empty and try to submit the form, it fails. If you fill in the html input and leave the ICDS one empty, the form will submit.

It would be really nice if, as well as preventing the form from submitting, the field automatically went into an inline error state with a configurable “This field is required” error text, similar to how the max/min characters behaviour works.

Start with the StackBlitz reproduction in src/app.tsx and compare the ICDS required text field with the native HTML input during form submission. Trace the field's required and validation behavior, then verify that an empty required field blocks submission and displays configurable inline error text, including for the other field types named in the issue.

Written by the indexing model from the issue text.