Create Required Field indicator before the user interacts with it

I can’t find a way to clearly indicate that a field is required before the user interacts with it. Am I missing something obvious?

I’d love to have some unobtrusive — and for preference, customisable — way of indicating required fields such as a * before the field label or shading the submission option a different colour or something.

Hi @David, You should be able to add a * to the label and customize the color. This gives you flexibility and control over how to show the required fields in your form.

Hi @kailash

Thanks for the idea, but that won’t work in my case for two reasons:

  1. I have a good 350+ input or radio fields in my form. To manually add a label to every field (and double-checking that I only added it to required fields) is a lot of unnecessary time and additional points of UX failure
  2. As far as I can tell there is no way to style parts of the label without styling the whole element. Even if I were to use the manual method you described above, all that happens is there is now a black * in front of each field description, styled the same as the element.

The ideal solution for me would be:

  • Required items have globally applied *Required ::before text which can be toggled on or off per form
  • The styling of that text is globally editable in the theme style

That way required fields on long forms will automatically have a user-defined and styled indicator of it being a required field, which also helps during form development to ensure that you’ve set your input fields correctly.