Styling inputfields in filter forms

[stepandersen]

Our current bordered white input fields are great for regular use like sign up, login, edit customer fields, etc. But for filter forms they are too demanding. By filter form I mean a form sitting on top of a table or list that a user can use to exclude the table rows that doesn't match their filtering criterias. The table content should be the focus of attention on a page, the filter form is there to help.

I think we need input fields that are more neutral to the eye.

In Ecom Admin a third party company came up with this design:

Like material Design, the label start at the placeholder size and position, and transition to the label size and position on focus, and stay in the label position if the input field has a value. It doesn't have to be like that, but I think it is a fair implementation.

An additional benefit of this approach is custom input value representation. In the use case "Select date range" there has to be two HTML date input fields, but the values can be concatinated in this representation:

Or even:

Use cases:

• Input field such as "Name". The input value is what is shown.
• Popover interaction like a graphical date range picker. A custom string representation of the values of multiple fields

HTML possibly something like:

<div class="form-group filter-form">
  <label clas="filter-form-label">Date</label>
  <input type="text" class="filter-form-input" id="date-from" value="">
  <input type="text" class="filter-form-input" id="date-to" value="">
  <div class="filter-form-value">10/04 - 19/04</div>
</div>

This HTML suggestion is probably too simplistic though.

To be clear, this is not a suggestion to input fields in general, I believe this is a form variant that should specifically be used in filter forms.

[Akswii]

We see the use-case and will consider this at a later time.