Web Interface  |  Inputs

Sizes

This section is about how to choose the right height and width of the form fields.

01Small height

It is better to avoid input fields with small text sizes and low field height. Such inputs are difficult to click with the cursor or touch and difficult to read the entered data. An input field with a low height is always a bad choice at the cost of reduced clickable area. It is good when the input has a height equal to or greater than that acceptable for click and tap, i.e. at least 40px.

Input with low height and small text is always a bad choice.
It's good when the input is of a reasonable height.

02Width of input

It is good when the width of input matches the format of the data. It makes no sense to stretch the "email" field to the full width of the page. It doesn't make sense to make the five-digit ZIP code field long.

The width of input is a good indication of what kind of data and what size is expected.

The width of the fields is the same and does not match the format of the entered data.
The width of the inputs fits the format of the data.

03Height of textarea

It is incredibly inconvenient if the textarea is so small and a scroll appears in it. The vast majority of users don't know they can drag the bottom right corner to enlarge the textarea.

It is best if the height of textarea is equal to the expected number of lines of text. Even better, if the height will automatically adjust depending on the amount of text.

The textarea height is too low and the text is hidden behind the scroll.
The size of the textarea is about the number of lines in the text.