| Filter / Action Menu |
Icon + label items, vertical list, hover/focus states, optional icons on left |
Contextual command lists (e.g., Filter by, Compare, Remove), appear on click |
Vertical / Compact / With Divider |
Light / Dark / Compact |
Menu.Filter.Base, Menu.Filter.Contextual, Menu.Filter.Action |
Amplitude, Mixpanel |
Action / Dropdown |
| Filter Category List |
Search input + expandable property list |
Grouped under collapsible sections (“Frequently Used”, “Event Properties”) |
Collapsible / Scrollable |
Light / Dark |
Filter.Category.Base, Filter.Category.Collapsible, Filter.Category.Grouped |
Amplitude, GA4 |
Filter / List |
| Nested Filter Properties |
Multi-level accordions, icon + text rows |
Hierarchical structure for property nesting (User, Event, Experiment) |
Accordion / Expanded |
Compact / Grouped |
Filter.Category.Nested, Filter.Accordion |
Amplitude |
Filter / List |
| Action Dropdown (Chart Settings) |
Vertical list, hover highlight |
Includes nested Export → submenu |
Default / Nested |
Light / Dark |
Dropdown.Action.Base, Dropdown.Nested |
Amplitude, GA4 |
Dropdown / Menu |
| Searchable Timezone Dropdown |
Search input + long scroll list |
Global list with keyboard scroll and filter on input |
Long / Searchable |
Light / Compact |
Dropdown.Select.Searchable, Dropdown.Scrollable |
GA4 |
Dropdown / Select |
| Date Range Filter |
Text button dropdown with date presets |
Preset values like “Last 7 days”, “This month”, “Advanced” |
Inline / Modal |
Light / Dark |
Filter.Date.Base, Filter.Date.Preset, Filter.Date.Advanced |
GA4, Firebase |
Filter / Date Picker |
| Inline Data Selector |
Side-by-side filters for dataset and date |
Compact form layout on analytics header |
Dual / Inline / Floating |
Light / Compact |
Dropdown.DataSelect.Base, Dropdown.Inline |
GA4 |
Filter / Layout |
| Analytics Source Dropdown |
Search + group list |
Dataset picker (Default, GA4, etc.), styled with highlight headers |
Grouped / Scrollable |
Light / Dark |
Dropdown.Source.Base, Dropdown.Source.Grouped |
GA4 |
Dropdown / Source Picker |
| Calendar Date Picker |
Month navigation + range selector |
Dual month view + “This week” range options |
Range / Single / Inline |
Light / Compact |
DatePicker.Range.Base, DatePicker.Advanced |
GA4, Firebase |
Date Picker |
| Filter Metric Switcher |
Checkbox list with metric names |
Toggling metrics dynamically filters chart |
Checkbox / Compact |
Light / Dark |
Filter.Metric.Toggle, Filter.Metric.Checklist |
GA4 |
Filter / Toggle |
| Sidebar Filter Panel |
Accordion filter container on side panel |
Contains report-level filters and active state count |
Collapsible / Persistent |
Light / Dark |
Filter.Sidebar.Base, Filter.Sidebar.Accordion |
GA4 |
Layout / Filter |
| Component-Level Filter Menu |
Inline filter targeting chart widget |
Select “This page” or “By component” for granular control |
Inline / Dropdown / Contextual |
Dark / Compact |
Filter.Inline.Component, Filter.Inline.Contextual |
GA4 |
Filter / Context |
| Quick Filter (Event Metric) |
Inline toggle on chart |
Dropdown option attached to chart node |
Contextual / Floating |
Dark / Compact |
Filter.Quick.Base, Filter.Inline.Quick |
GA4 |
Filter / Context |
| Advanced Date Selector (Firebase) |
Start + End input fields with nested dropdowns |
Multi-level control: “Today / Minus / Days” |
Multi-input / Modal |
Light / Dark |
DatePicker.Advanced.Modal, Filter.DateRange |
Firebase |
Filter / Form |
| Analytics Multi-Calendar |
Two calendar dropdowns + range presets |
Combines “Fixed/Relative” and “Custom” types |
Dual / Range |
Light / Dark |
DatePicker.Dual, DatePicker.Relative |
Firebase |
Filter / Date Picker |
| Video Data Filter (YouTube Analytics) |
Searchable dropdown with metrics |
Select metric per dimension (Views, Watch Time, etc.) |
Searchable / Scrollable |
Light |
Dropdown.Analytics.Metric, Dropdown.Scrollable |
YouTube Studio |
Filter / Select |
| Multi-Date Range Selector (SA360) |
Range + dropdown within analytics grid |
Nested preset lists with week/month/quarter options |
Nested / Calendar |
Light |
DatePicker.Preset.Nested, DatePicker.Quarter |
SA360, Looker |
Filter / Date Picker |
| Category Selector Dropdown |
Checkbox + search-enabled list |
Multi-select options (Team, Subject, City) |
Multi / Checkbox / Search |
Light |
Dropdown.MultiSelect, Dropdown.Checkbox |
Firebase, GA4 |
Dropdown / Select |
| Customer Segment Toggle |
Binary dropdown menu |
Simple include/exclude value states |
Binary / Compact |
Dark |
Dropdown.Toggle.Binary, Dropdown.Switch |
Tableau |
Dropdown / Filter |
| Multi-Filter Form Panel |
Stacked dropdown fields (Product, City, Branch, etc.) |
Global filter sheet modal |
Stacked / Sheet |
Light |
Filter.Panel.Base, Filter.Panel.Stacked |
Tableau, GA4 |
Filter / Form |
| Inline Calendar Compact |
Small calendar popup attached to input |
Mini date selector with “Today” footer |
Compact / Inline |
Light |
DatePicker.Compact, DatePicker.Inline |
Tableau |
Date Picker |
| Command Search Input |
Magnifier icon + border highlight on focus |
Search for dashboards, users, etc. |
Default / Active |
Dark / Compact |
Input.Search.Base, Input.Search.Focused |
Grafana, Mixpanel |
Input / Search |
| Query Searchbar (Grafana) |
Full-width search for queries |
Embedded in analytics header |
Expanded / Command |
Dark |
Input.Search.Expanded, Input.Command |
Grafana |
Input / Search |
| Filter Label Search |
Input + filter icon |
Allows searching label values dynamically |
Inline / Search |
Dark |
Input.Filter.Search, Dropdown.Filter.Inline |
Grafana |
Input / Filter |
| Time Range Selector |
From–To input + preset list |
Allows typing time range manually |
Dual / Input |
Dark |
DatePicker.TimeRange, Input.Time |
Grafana |
Date Picker / Input |
| Inline Text Field (Banner Config) |
Text input with label & helper |
Inline date-time selector with “Start At” |
Inline / Form |
Dark |
Input.Text.Inline, Input.DateTime |
Grafana |
Input / Form |
| Compact Form Calendar (Banner Config) |
Inline calendar in config modal |
Tight dark-theme modal version |
Compact / Inline |
Dark |
DatePicker.Inline.Compact, Input.Form.Inline |
Grafana |
Date Picker / Form |
| Feedback Modal (Text Area) |
Large textarea + Cancel/Submit |
Used for submitting textual input |
Modal / Single |
Dark |
Form.Feedback.Base, Input.TextArea |
Mixpanel |
Form / Modal |
| Dropdown Select (Help / Request Type) |
Dropdown menu with long labels |
Nested contextual options (“Help”, “Account”, etc.) |
Long / Nested |
Dark |
Dropdown.Help.Base, Dropdown.RequestType |
Mixpanel |
Dropdown / Select |
| Form Fields (Subject, Message, Attachments) |
Text fields, textareas, upload zone |
Modular stacked structure |
Stacked / Expandable |
Dark |
Form.Support.Base, Form.Field.Stacked |
Mixpanel |
Form |
| Form Contact Layout (Mixpanel) |
Two-column grid input layout |
Combines input, segmented buttons, and dropdown |
Two-column / Grid |
Light |
Form.Contact.Base, Form.GridLayout |
Mixpanel |
Form / Layout |
| Autocomplete Input (Name Field) |
Suggestion dropdown on input focus |
Inline suggestions with avatars |
Suggest / Inline |
Light |
Input.Autocomplete.Base, Dropdown.Suggestion |
Mixpanel |
Input / Dropdown |
| Form Error State |
Red outline, inline error message |
Inline validation feedback |
Error / Active |
Light |
Input.State.Error, Form.Validation.Inline |
Mixpanel |
Form / Input |
| Project Switcher Menu |
Dropdown with section labels |
Quick access to projects and datasets |
Grouped / Flat |
Dark |
Dropdown.ProjectSwitcher.Base, Dropdown.Grouped |
Mixpanel |
Dropdown / Menu |
| Underlined Input Field (Focus Variant) |
Minimal underline + color change |
Material-inspired form underline feedback |
Default / Active / Focus |
Light |
Input.Underline.Base, Input.Underline.Focus |
Google Forms, Looker |
Input / Text |
| Reason Selector Dropdown (Support) |
Text select with grouped categories |
Help categories dropdown |
Grouped / Long |
Light |
Dropdown.Select.Grouped, Dropdown.Support |
Google Support |
Dropdown / Select |
| Basic Form Inputs (Text Fields) |
Label + text box + required asterisk |
Standard vertical layout |
Default / Required |
Light |
Input.Text.Standard, Form.Basic |
Looker Studio |
Input / Text |