Date range filter component

A Date range filter allowing users to pick a date range.

When to use it?

The Date range filter is an ingredient of the Search & sort recipe and should only be used in this context.


A Date range filter is composed of two text fields label “From” and “To”.

Both text fields should display the following placeholder: “YYYY-MM-DD”.

A default “Apply” button should be added to start the search.


When users click on a Date range field, the field should become active.

When they start typing, a clear icon should appear on the right.

To start the query, users should click on the “Apply” button.