What is a required field — and why the asterisk advice contradicts itself

Required fields look like a settled topic. Add required, draw a red asterisk, done.

Now look at this. Nielsen Norman Group, the usability shop everyone quotes, in an article dated 16 June 2019: mark every required field with an asterisk. The GOV.UK Design System, the reference for British public services, says literally: "Never mark mandatory fields with asterisks." And adds: don't put required on your inputs.

Both are right. What differs is the kind of form they have in mind.

What the required attribute does

Technically it's simple. required means the browser won't submit the form while the field is empty.

<label for="email">Email address</label>
<input id="email" name="email" type="email" required />

The browser pops up its own hint next to the field and moves focus there. CSS gets :required and :invalid to style against. A screen reader announces the field as required.

There's a trap hiding here that catches almost everyone who decides to highlight required fields in red. The :invalid selector matches immediately: an empty required field is invalid the moment the page loads, so the form greets people with a spray of red borders before they've done anything. The cure is the neighbouring :user-invalid selector — it only kicks in after the person has interacted with the field or tried to submit. Per MDN it's been available across browsers since November 2023, so it's safe to use.

One important limit: this is a check in the browser, not protection for your data. It's bypassed with one line in the console, and JavaScript may not load at all. So required fields still get checked on the server — required exists to stop an honest mistake, not to stop junk arriving.

Why GOV.UK drops both the asterisk and required

Their forms are built differently. Their design system follows "one question per page", and a team has to justify why each question exists at all before adding it. The result: nearly every field is mandatory. An asterisk on every field stops being information and becomes visual noise. So GOV.UK marks the other way round: the rare optional fields carry "(optional)" right in the label.

The reason for dropping required is technical: they recommend turning off built-in browser validation with novalidate. The argument is honest — the look, placement and wording of browser messages can't be matched to your own components, and theirs are accessible and tested on real people.

Why NN/g insists on the asterisk

NN/g is looking at other forms: sign-up, checkout, applications. Those are full of optional fields — phone, company, promo code, "how did you hear about us".

Their case against marking only the optional ones:

• Nobody reads the instruction at the top. "All fields are required unless marked otherwise" is a classic line that eyes slide straight past.
• Even when read, it's forgotten. Especially in a long form, and especially on a phone, where interruptions are constant.
• People start guessing. "Phone? They can't really need that" — and straight into an error on submit.

Hence: mark them explicitly. A red asterisk is familiar; the word "required" works too. Marking the optional ones as well is a bonus — less guessing either way.

A ten-second rule for picking

1. Count the fields. Mostly required → label the rare exceptions "optional". Mostly optional → put asterisks on the required ones.
2. Never leave a form with no markers at all. Silence is the worst option: people still guess, just silently.
3. Carry the meaning in words, not only in colour. A bare red asterisk is a riddle for anyone who doesn't see red as red. Add a legend ("* required field") or the word itself.
4. Check the field is needed at all. The cheapest way to simplify a form is to delete a question. If an answer changes none of your decisions, it needs neither a marker nor validation.
5. A long form is better split into steps than better labelled — with two or three fields on screen, the question answers itself.

One detail people miss: keep the word "Required" outside the field rather than in the placeholder. NN/g points out that inside the field it disappears once the field is filled — which is exactly when you want to spot the empty ones.

Testing yourself is easy: open your contact form and look at it for ten seconds like a stranger. If you can't tell what's skippable in that time, the markers aren't working.

Can I use just the asterisk, without the word?

Yes, the asterisk is widely understood — but put a key near the form and make sure screen readers announce the field as required. Never rely on colour alone: red isn't red for everyone.

If a field is required, do I still validate it on the server?

Always. required is a hint for the person in the browser, not a barrier. A request can reach your server without your form being involved at all, so required-ness gets checked where the data lives. Autofill doesn't change that — it fills values in, but it isn't responsible for them being there.