Imagine an app like yelp. In this case, you select the number of stars that you want to rate something. When you do, a pre-generated text is displayed in the text input field. You can either keep this text, as it is a useful pre-generated review, or you can delete this text and write your own.

I'm trying to decide what the best way is to indicate that this text is something that you don't HAVE to use, that it's an option, not forced upon you. That it is editable.

I can: - have an icon that indicates that it is editable (pencil?) (not very clear) - have text that says e.g. "tap to edit" (a bit messy, having a hint on screen) - have the text be "selected" the moment it appears on the screen. (cleanest way, but is it clear enough?)

Anything obvious I'm missing? What do you think is best?

5 Answers 5


I think a good way of dealing with this is to add a round close icon found on many search inputs. This indicates that not only is the text editable but can be cleared if they choose not to use it.

  • 1
    That's interesting - I like that. Rather than trying to hint at the functionality directly from the text itself, you hint indirectly via another control that also adds value by clearly defining a call to action in the event that the user wants to use a different message. Good answer! Commented Feb 6, 2013 at 10:06
  • Interesting idea indeed! Thank you! (thanks everybody for all the answers by the way :)
    – arnold
    Commented Feb 6, 2013 at 19:03

The best way in my experience is to do at least the following:

  1. The text should be high contrast, for example black on white (preferred) or white on black depending on your design.

  2. The text should be visually distinct from labels and other non-editable fields in your application.

  3. If your application uses a mouse, ensure that the cursor changes to the I-beam cursor when the mouse hovers over it.

  4. If your application does NOT use a mouse, use an additional affordance, such as a fixed rectangular border and differentiating background color to show that the text is different to the rest of the application and can be selected for editing.


I would simply do this:

Whenever the text-area with default text is generated, I would display it as selected text by default. This will clearly make the user feel that the text is editable.


You can put this in an afterRender

  • 1
    That's fine for single field but what if there are several editable fields on the same page? You can't have all of them selected at once.
    – JonW
    Commented Feb 6, 2013 at 12:13
  • Yes, you cannot have all of them selected at once. The idea is to make the user think that the text is editable. All the fields would mostly be similar-looking. The first among them would have the focus and so the text would be selected. In addition to that, whenever user hovers on the field, a pencil icon can be made visible somewhere around the text-area/box. Commented Feb 6, 2013 at 12:30

This is kind of a loaded question that depends on what else is on the screen:

  • If you have multiple editable fields, you could have a separate edit state for the app (a common convention in iOS). And then after editing is done, save and take the user back to the initial screen.
  • You can set the editable text off with a different color (think about link color conventions) and treat it in a way that is subtle.
  • There is nothing wrong with saying "Edit" near the field. It may not be elegant, but there is no mistaking what I can do (This however is English specific, which is where an icon may lend itself as a better solution)
  • Yes, it seems that often the less elegant solutions are the most clear and most communicative ones.
    – arnold
    Commented Feb 6, 2013 at 19:05

Add a placeholder that says what the user should write (e.g., name)

  1. Change the style to have inner shadow
  2. On hover you can show a pencil icon inside the text box
  3. You can add a pencil icon at the left corner of the input field

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.