10

For example when asking a user what pet they have and it's a required field, a Please select option is included since the pet is currently unknown:

<select required>
  <option value="">Please select</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
</select>

However if we already know the pet since it's been saved previously, and we only want to allow the user to change the required field, when the user returns to the page should we still include the Please select option?

So in this case, is it better to remove Please select so they cannot deselect the field:

<select required>
  <option value="dog">Dog</option>
  <option value="cat" selected>Cat</option>
  <option value="hamster">Hamster</option>
</select>

Or keep the Please select so the dropdown behaves the same as the original one they used to set the value. If they do deselect the field the browser will prompt them to provide an option when the form is submitted.

<select required>
  <option value="">Please select</option>
  <option value="dog">Dog</option>
  <option value="cat" selected>Cat</option>
  <option value="hamster">Hamster</option>
</select>

i.e. is it suitable to remove this option on a required <select> in this way when an option is saved?

Improve this question
3
  • 1
    Does this answer your question? What should be the default option of a required dropdown list?
    – Nash
    Commented Apr 30, 2021 at 12:04
  • 1
    I did see that before I posted. It's not specifically about whether to remove the default option.
    – Alec Rust
    Commented Apr 30, 2021 at 12:58
  • 1
    This is not a duplicate an dteh other question doesn't have an accepted answer either
    – Devin
    Commented May 12, 2021 at 16:55

3 Answers 3

Reset to default
9

As you have suggested, I would recommend in the instance of a required field, that you don't have the "please select" option when the user is "editing" the form.

If this is a required field, then the "please select" option is never valid during an edit, and therefore should not be included as it implies that the user can select it as a valid option.

Obviously it is important to keep it when the user first completes the form, as we do not want to assume a default that may be incorrect. This way we force the user to think about it and ensure they select the correct option. This helps improve the accuracy of the collected data.

For completeness, if the field was optional, then the list should include an option such as "None" or "Not Applicable". This way they still have to explicitly think about providing correct data, rather than just skipping over it and allowing a default blank option.

Improve this answer
6
  • Thanks, this was my thinking also. It just seems slightly strange to change the options of required <select> fields based on whether the value has previously been set. This is not a pattern I'm familiar with, I think people typically always show the same <select> HTML regardless.
    – Alec Rust
    Commented Apr 30, 2021 at 13:02
  • The subtle difference between the behaviour is also something I wouldn't expect users to appreciate, but they may get used to how it works one way and expect that next time. Not a big problem, but potentially noticeable to the user.
    – Alec Rust
    Commented Apr 30, 2021 at 13:05
  • 1
    @AlecRust: Personally, I think that sounds like people who just can't be bothered to implement the scenarios differently, or perhaps just never considered it in the first place. It really doesn't make any sense to show that option during an edit.
    – musefan
    Commented Apr 30, 2021 at 13:05
  • @AlecRust: Although I may be wrong, I wouldn't think a user will particularly notice (or care) that some sites allow them to select an invalid value during edit, and some don't. If anything, they will wonder "Why are you allowing me to select this value if you won't even let me confirm it?". How common a use case do you think it is for somebody to edit a form for the purpose of deselecting a required value? Not very often I would expect, and as long as it is clear that the field required then the user should not suffer any confusion as to why it isn't available.
    – musefan
    Commented Apr 30, 2021 at 13:09
  • My point was not so much about different sites, but the same input on one site. A form may redirect back to the form after save, at which point the <select> has changed. But yes, I agree most users would not really notice.
    – Alec Rust
    Commented Apr 30, 2021 at 13:12
3

One trick I would recommend is on the first render to show the blank option, but make sure it is disabled and selected so that it appears for the user, but isn't a valid option.

This forces them to select a different one, but also gives them a placeholder.

That said, many UI frameworks have a separate placeholder feature for selects, so that may be a better solution for most developers.

<select name="myselect" required>
  <option disabled="disabled" selected="selected">Please select...</option>
  <option>Real Option 1</option>
  <option>Real Option 2</option>
</select>
Improve this answer
1
  • This is a good suggestion, but never let it be an excuse to omit the label.
    – jazZRo
    Commented Feb 9 at 8:28
1

If this is the second time the user is proposed the same required option selection, do NOT use the empty <option value="">- - Please select - -</option> technique.

But more than that, the principle of proposing a second time to choose AGAIN from the same list of options could be a sign that your flow might need optimization.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.