11

Why the text fields (as below) in Google Material Design are without boxes? enter image description here

Here is a live demo of Material Design text fields. Polymer paper elements - paper-input

What are the benefits of this design comparing with transitional text boxes? For example, a live demo of Bootstrap inputs. Bootstrap inputs

If I add a box around the text field, do I break the Material Design principles?

  • I'm confused on what you're asking. Can you be a little more clear about what you're trying to achieve? – Majo0od Dec 12 '14 at 2:04
  • @Majo0od thanks, I have updated the question and could you please have a look. – Jake Lin Dec 12 '14 at 2:47
19

Why are the textboxes without boxes?

It is an interesting principal of material design and choice.

The reason Google went without the box was because it's analogical to writing on ruled paper. Material is all about having one constant "material" for your page so boxes would be constituted a different element and a different material.

Another reason is the font. Font size is usually restricted to the height of the box. With no height this restriction is removed making sure that any special characters stay in the box

Do you break material if you have a box ?

Yes and no. It depends on the box. The box should try to blend well with the background and look like a box on a paper page for example. So no shadow or color in the box. Apart from that there's no particular reason

  • Interesting view. However, not quite consistent with what you see in the sample image. When writing on paper, you use the line as the base line of the text. That is, letters like jgy would sink under the line. That is not the case here, breaking the analogy with writing on paper I think. – André Dec 12 '14 at 7:12
  • 1
    @André Interesting; my handwriting stays above the line even when letters have a hanging base. Maybe it depends on the person's style. – Matt Dec 12 '14 at 15:22
  • Back in the days, I was tought to write like this: blogs.lynn.edu/knightwriter/files/2012/01/writing.png Note how jgy sink below the base line. Not that I write like that anymore, but still... – André Dec 15 '14 at 7:31
1

The input fields are still ordinary input fields having the CSS property border-width set to 0,0,1,0.

You definitely won't break the specification, cause it's primarily for spacing, padding and typing behavior. The "official" specs for text input can be found at google. They give numerous examples including examples with full boxes, e.g. google maps search field.

Text fields allow the user to input text. They can be single-line, with or without scrolling, or multi-line, and can have an icon. Touching a text field places the cursor and automatically displays the keyboard. In addition to typing, text fields allow for a variety of other tasks, such as text selection (cut, copy, paste) and data lookup via auto-completion. See Patterns > Selection for text selection design.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.