Why the text fields (as below) in Google Material Design are without boxes? 
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?
Answer
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
No comments:
Post a Comment