Filter Dropdown

All core field types

Covers plain and labelled string options, both range modes, wildcard and multi-currency values, default and custom booleans, and a single date.

Optional string variants

One control for every branch of OptionFilter, plus labelled ID/name options.

Large string list

Exercises scrolling and selection with 50 options.

Date filter variants

Covers an unrestricted picker, every fixed and rolling value shape, a single-mode prop, and the combined rolling-mode array prop.

Live values

{
    "departments": [
        "Engineering",
        "People"
    ],
    "largeStringList": [
        "Option 001",
        "Option 025",
        "Option 050"
    ],
    "sources": [
        "linkedin"
    ],
    "name": "Second",
    "ats": "greenhouse",
    "score": {
        "lowerInclusive": 35,
        "upperInclusive": 80
    },
    "fullCoverage": {
        "mode": "Full",
        "range": {
            "lowerInclusive": 10,
            "upperInclusive": 90
        }
    },
    "partialCoverage": {
        "mode": "Partial",
        "range": {
            "lowerInclusive": 20,
            "upperInclusive": 75
        }
    },
    "salary": {
        "*": {
            "lowerInclusive": 450000000,
            "upperInclusive": 900000000
        }
    },
    "fullBonus": {
        "mode": "Full",
        "currencyRanges": {
            "GBP": {
                "lowerInclusive": 50000000,
                "upperInclusive": 200000000
            },
            "USD": {
                "lowerInclusive": 75000000,
                "upperInclusive": 250000000
            }
        }
    },
    "partialBonus": {
        "mode": "Partial",
        "currencyRanges": {
            "*": {
                "lowerInclusive": 0,
                "upperInclusive": 150000000
            }
        }
    },
    "remote": false,
    "approved": true,
    "snapshotDate": {
        "day": 15,
        "month": "June",
        "year": 2025
    },
    "ratingExists": "Exists",
    "ratingMissing": "NotExists",
    "ratingMatches": {
        "ExistsAndMatches": [
            "Meets Expectations"
        ]
    },
    "ratingMissingOrMatches": {
        "NotExistsOrMatches": [
            "Needs Support"
        ]
    },
    "optionalSource": {
        "NotExistsOrMatches": [
            "linkedin"
        ]
    },
    "betweenDate": {
        "FixedRange": {
            "startInclusive": {
                "day": 1,
                "month": "January",
                "year": 2025
            },
            "endInclusive": {
                "day": 31,
                "month": "March",
                "year": 2025
            }
        }
    },
    "beforeDate": {
        "FixedRange": {
            "endInclusive": {
                "day": 30,
                "month": "June",
                "year": 2025
            }
        }
    },
    "afterDate": {
        "FixedRange": {
            "startInclusive": {
                "day": 1,
                "month": "July",
                "year": 2025
            }
        }
    },
    "relativeMonths": {
        "RollingPeriod": {
            "Months": 6
        }
    },
    "relativeDays": {
        "RollingPeriod": {
            "Days": 30
        }
    },
    "relativeChoice": {
        "RollingPeriod": {
            "Months": 12
        }
    }
}