I've come across a situation in a form where one group of people is expecting an input field for a percentage value to be whole numbers, whereas the other expects decimal values. Either way when the control lost focus, you would show the whole number formatted with a percentage symbol in the field. (Side note, for this specific situation we also have increment/decrement arrows next to the fields to increase the value of the field by a predetermined step-size.)

Think like this:


download bmml source – Wireframes created with Balsamiq Mockups

I can see the merit of both, I'm just curious if there's any guidelines or if someone has done research on anything related? My intuition says decimal value.

3 Answers 3


I think it's undesirable to change the format/contents of the entry field upon getting-focus and losing-focus, which would be the case if "0.1" was converted to "1%" upon losing-focus.

I would put a "%" immediately to the right of the entry field and make the entry field not accept "." or any other non-integer input, basically disallowing any inappropriate input. This would then not require any format/content changing upon get-focus or lose-focus, and would make use of the entry field easy enough to figure out (and require less in less typing from the user).

  • I agree. The field label should include the % symbol or the word 'percent'. The field value should not contain the % sign. Also, converting a decimal value to a % prevents the user from entering x.x%. Perhaps that type of value is not a valid value but the question does not describe this constraint. Nov 19, 2012 at 16:03


Responding to a request for written guidelines, I suggest checking out this site, it seems to have the best content and is very easy to read, with examples:


Further reading here:


The tricky thing is, the question is asking for guidelines applying to specifically percent-formatted numbers of text fields. Most guidelines tend to apply less specifically, stopping around the alignment and arguments for and against default text or hint text. I'm a fan of hint text! Hint text, of course being that default text that disappears when the cursor is placed within the field.

Original: I would upvote obelia's answer except I'm new to this stackexchange site, and this is the first Q&A I've found. And I really like obelia's answer :)

But, must add my own useful and complete answer: As obelia said,

  1. having a % at the right of the entry field would be very useful
  2. disabling of the period/decimal point as input would add to the clarity.

But these are not perfect

  1. If you're left-aligning, as in your sketch-up, a percentage on the right isn't as pleasant. Bah, sometimes it feels awkward to force a right-aligned number entry on a form user, because textboxes default to left, and I bet 90% of number entry fields on the web and in paper are filled out left-aligned. oh well. Spreadsheets are my friend for right-alignment. :)
  2. If you want something more precise than 1%, like 0.5%, disabling the period is a no-go.

The solution I'd use is a default value in the field before focus, with a percentage sign at the end. Depending on implementation, this approach does not NEED to be hint text that disappears on-focus, it can be left in the field or removed at your discretion. And of course, assuming it is left in, then just do field validation when the field focus is lost. Then you can assume the person knew the proper style to input, and has entered what they want in the proper way. Plus, after the field validation, if they see a value that surprised them, they can edit again.

Anyway, it's unlikely a person who sees:

[ 0.0%     ] ^v

then submits:

[ 0.1      ] ^v

will ever be thinking "I want to enter 10 percent".

  • Good thoughts for sure, however I'm looking more for existing guidelines and research if at all possible. If there's none to be found, then it looks like we've got some of a start here :).
    – GotDibbs
    Nov 19, 2012 at 14:10
  • I added some links to published guidelines, but without further clarification on how you're validating (server-side? client-side javascript or other?) I'm just hoping this answers your question.
    – Tom Pace
    Nov 22, 2012 at 1:04

I cant dig up any research on the pros and cons of using whole numbers vs decimals, you have to look at the use case of when people are not sure what the decimal value equates to in terms of percentage. For example we can easily calculate that .1 is 10% by multiplying it by 100 but unless someone knows how to do that, they might get confused.

However it also depends on your use case too. If you are going to tell users to multiply the decimal value into another number to determine what that 10% percentage or .1 value is and you want to make it easier for users, then you should look at keeping it at making the process easier (and here using percentage fails since users would have to the percentage value/100 which is additional work and might confuse someone who is mathematically challenged

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.