We have a web form where some of the field values have required prefixes, which identify the namespace. (This is established business logic that will not be changing.)

Example: If the user wants to create an artifact for johndoe, that artifact name will begin johndoe_ and continue with the value entered into the field.

I want to present the form in a way where it will be clear that the string johndoe_ (1) will be part of the artifact name, and (2) the prefix cannot be changed.

Here's a mock-up of the currently-implemented solution. I think this is (1) a little homely and (2) not very clear for a new user. Is there a better way to present this?

Form fields with required prefixes

  • 1
    Would a similar use case be like creating a slack team where you can choose the subdomain but the ...slack.com is static? Maybe you could take some inspiration from that?
    – Midas
    Aug 15, 2017 at 21:53

1 Answer 1


You can try a couple variations:

  1. you can encase the prefix so it's disabled (but still grouped together), and only the input to the right is enabled

  2. if it's unclear, you could also show the full string to the right of the form as the user types

enter image description here

You'll find something similar to this in bootstrap

enter image description here

And here's the material version of prefixes and suffixes (It's a bit more subtle):

enter image description here

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.