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.

This is definitely something that we would want as well. It can become hard to tell as a user which field is required vs not. Especially if we are using text fields to ask some questions versus the inline display property. Having a consistent way to clearly show a question is required is a necessary feature for a lot of forms