13 Comments
Aug 28, 2023·edited Aug 28, 2023

I've always liked the clarity and focus of a white-filled form fields on a (slightly) off-white background. Guarantees a background with maximum contrast, avoids a 'inactive-state' appearance, and makes the form fields look like they're in the foreground.

Expand full comment

White fields, especially if you are using a light button style in your design system. Fields need to be unique from buttons, and if you are using light gray as as secondary button, it will slow people down if fields are also filled with light gray...It will take them some cognitive time to differentiate them across screens. Additionally, white fields have a better ADA contrast for readability.

Expand full comment
author

Good point about the secondary button confusion.

Expand full comment

The grey inputs can always potentially look like they are disabled whereas in the white inputs it's clear from the different coloured text what inputs are interactive. I like the trend of the grey inputs, however, I think white will win in terms of usability and understanding of what state the input is in to complete their task at hand.

Expand full comment

The grey box around the white fields is a bit superfluous. You could just have the borders be a bit more pronounced and delimit them from the white background just fine. Boxes within boxes is layout design no-no 101.

Expand full comment
author
Aug 29, 2023·edited Aug 29, 2023Author

Hard, pronounced borders create more visual noise and distractions. It's why the fields are on an off white background. Boxes within boxes are only a no-no if the borders are hard and pronounced, which goes back to the original point.

Expand full comment

White fields. They are easier to work with and easier to read at a glance.

Expand full comment

Hello !

For my part, I see several problems:

1. The "empty" state should not show the field label + text to appear in the input area. The label will be sufficient.

2. All fields have the same design, for different states. We could easily imagine helping the user with a slightly darker border-color for the filled fields ( just for exemple).

3. The "select one" text does not seem necessary to me, there is already a label + a chevron...

4. I'm not sure if the problem is "gray fields or bench fields" but rather the design of the fields in general :)

Expand full comment

I like white fields for the same reasons as others have mentioned here (confused as being disabled, tougher to placeholder text, etc.). In addition, in real-life things that are higher in the z-index are lighter and backgrounds are darker. Also, usually much more background space which means more glare. I know it is a new trend, but not a fan of it.

Expand full comment

Page background should never be bleach white. I’m always going a few tones off just create a slight contrast with the fields and other components.

Expand full comment

Ideally the labels would be outside the field - but thats a different discussion.

Based on the comments, it looks like I'm in the minority.

I prefer the off white fields.

The 2 arguments above aren't strong enough to dissuade me.

Point 1, many would argue placeholder text shouldn't be in the field to begin with. You lose it when you engage with the field. Outside under the label is preferable.

Point 2, there is little risk that that users will mistake the fields are disabled if all the fields are off white.

Expand full comment
author

Placeholder text under the label can get messy when error messages appear below it as well. It also forces you to increase the horizontal margin spacing below each field. Since some fields won't have placeholder text, this creates a margin spacing imbalance from row to row.

However, if you make every margin the same size regardless of placeholder text, you'll have a few large rows of empty whitespace. This is why infield placeholder text is necessary for a clean and uncluttered form.

Expand full comment

> but you do have to build a background frame around them which could complicate the layout

I rarely do that and instead put the white-filled fields on a white background. Is this bad practice? If so is there any article or study that you could point me to?

Thanks :)

Expand full comment