The Cone Trees network The UX Bookmark UX Quotes UX Jobs in Singapore Nice one yeah!

Download Axure ‘Clear input field value on focus’ prototype/ widget library

Clear text on focus prototype and widget library

Two Axure widgets (clear text on focus of text field & clear text on focus of text area) for the Input Prompt design pattern are available for download in Axure widget library (.rplib) and and project file (.rp) format.

Demo the Clear Input Field Value on Focus Axure widgets

Demo (opens in new window, 105 kb)

Watch an example video

(File size: 330 kb)


Clear text value on focus of input field- Axure Project file (.rp) (9280 downloads)
Clear text value on focus of input field- Axure Widget Library file (.rplib) (21263 downloads)

Creative Commons License
Axure Widgets for the User Interface Pattern: Clear Input Field Value onFocus/ Input Prompt by Abhay Rautela is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 India License.
  • Shannon

    I found this just when I needed it. Thanks!

  • Jan

    Hi Abhay,
    I was looking at your Axure RP widget (Clear Text Field Value). In your online demo, I really like the way the widget’s formatting changes based on the interaction i.e. when on focus, the text box’s borders turn to yellow. I downloaded both the widget and the prototype files but in both the behaviour is different.

    May I ask how you achieved this?


    PS – BTW great widget, using it a lot.

  • Jan, good to know you use it a lot.

    To answer your question, I haven’t applied any CSS that makes the text box’s border turn yellow. You happen to be viewing the demo on a browser that applies that styling to input elements on pages viewed in it. An example of such a browser is Chrome. View the demo in IE or Firefox on a PC and it shouldn’t appear.

    By the way, this may help you. The code that is used in Chrome for the yellow border styling for input elements is this: input:-webkit-autofill { background-color: #FAFFBD !important; background-image:none !important; }

  • Jan

    Thanks Abhay… now I feel like a fool… I was indeed using Chrome

  • HI ,I am chinese,your website big big good !!

  • Hi

    I downloaded the zip file but there doesn’t seem to be a .rplib file in it. It just unzips to a whole load of directories, eg AnnotationFieldSet and GlobalVariableSet. Am I missing something?

    Thanks, Andrew

  • @ 栗伟: Thank you.

  • Well Andrew, I downloaded the zip files and they’re working just fine. There is probably an issue with your zip app. Try downloading from a different machine. If it still doesn’t work, send me a screen shot of what you saw.

  • Hi Abhay

    It looks like there is a problem with the ZIP file on Mac OSX. I unzipped it on Windows and it worked fine. Thanks for the file!

    Cheers, Andrew

  • Joe

    Mac version does not unzip correctly. Please let me know when you get this updated – looks like a good tool.


  • John Lee

    I found this this just when I need it! Thank you!

  • Athar

    Same problem here. Can’t download.
    Abhay, would you pl mail me this and mobile gestures library.

    Thanks for such a nice share.

  • When unzipping the file with Mac OSX, here’s what I see:

    I’m guessing this is the same problem experienced by Athar, Joe, and Andrew. Except that I don’t have a Win machine like Andrew does.

    The unzip program I’m using isn’t anything special, just whatever is built into Mac.

    Looks like a very useful Library. Thx, Patrick

  • Patrick, et al/ mac users, rejoice. You can download the files without any problems now.

    For those interested in knowing the reason for the issue and how I fixed it- here’s what was happening. It turns out that .rp is a compressed file format. When you open download my stencils and open it on a mac, it unzips both the zip AND the contents of the .rp file itself.

    How did I fix it? I placed the .rp and .rplib file in a folder and then zipped them up. I’ve tested them on my mac, they’re unzipping fine. If not, let me know.

  • 小白

    Hi,I am chinese,I found this when I study Axure.Thank you,I like it very much!

  • Richard Price

    Hello – THanks! I can’t figure out how to edit the text in Axure without killing the clear functionality. The default text you have works, but when I double click the widget on my canvas I can change it but then the clear doesn’t work.


  • john case

    As with Richard, when I edit the text, clear function stops working. How to correct?


  • Issy

    Thanks – nice and simple

  • Thank you!

  • ConeTrees

    You’re all very welcome.