I have a text field that starts out as one line and can sometimes expand to multiple lines. When it's one line I'd like to have a cancel button in it like this: (Enter text here X), but I'm not sure what to do for the case where the text field has expanded to multiple lines, where should I put the cancel button?

2 Answers 2


I assume the text field grows when it expands to multiple lines? If so -

Just make sure that the placement of the cancel button is consistent. Put it to the top right inside the textfield and make sure the padding from the top and the right stays the same when your text field expands from a single to a multiple. That way it doesn't move when the box expands so the user always knows where and what it's for.

I imagine an effective visual of this would be a simple circular button with an x in the middle.

Google+ Example

Google+ has a great interactive way of doing this upfront making the text field expand when you click on it - even before you type.

enter image description here

  • Yeah I think you're right. I just wasn't sure if there was a good example of this somewhere. Since I'm mixing single and multiple line fields, it definately makes sense to just keep it in one place, and as the upper right hand corner will be stationary even as the field expands it seems logical to just keep it there. Now to get the padding to stay consistent... By the way, I do really like the way that Google+ expands the text fields when you click on them.
    – dylan
    Jun 6, 2012 at 17:21

Is it possible for you to do something like this:

Enter text here X
More text there
Some more stuff

Other fields
  • Yeah I think keeping it like that makes sense.
    – dylan
    Jun 6, 2012 at 17:22

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.