Components

Search, menus & filters

Search inputs, dropdown menu items, quick-filter chips, active filter bars, and composable filter panels — the selection and discovery layer of every data-heavy view.

Stable

An enhanced text input scoped to search. Pairs a leading search icon with an optional clear button and keyboard shortcut badge.

Default
With value & clear button
With keyboard shortcut
 /  
<!-- Basic search -->
<div class="ws-search-wrap">
  <svg class="ws-search-icon">...</svg>
  <input class="ws-input" type="search" placeholder="Search..." />
</div>

<!-- With clear button -->
<div class="ws-search-wrap">
  <svg class="ws-search-icon">...</svg>
  <input class="ws-input" type="search" value="Acme Manufacturing" />
  <button class="ws-search-clear" aria-label="Clear search">&times;</button>
</div>

The atomic unit of every dropdown, context menu, and command list. Items compose into a .ws-menu-list container and support icons, values, badges, checkboxes, radio buttons, and keyboard shortcuts.

Simple
With icons
Admin
With values & counts
Checkbox & radio
Policy type
Expiry
<div class="ws-menu-list">

  <!-- Section header -->
  <div class="ws-menu-section">Policy type</div>

  <!-- Simple item -->
  <button class="ws-menu-item">
    <span class="ws-menu-item__label">View details</span>
  </button>

  <!-- With icon -->
  <button class="ws-menu-item">
    <svg class="ws-menu-item__icon">...</svg>
    <span class="ws-menu-item__label">Client profile</span>
  </button>

  <!-- Active + with count badge -->
  <button class="ws-menu-item is-active">
    <span class="ws-menu-item__label">Active policies</span>
    <span class="ws-menu-item__badge">84</span>
  </button>

  <!-- Checkbox item -->
  <button class="ws-menu-item is-active">
    <span class="ws-menu-item__check"><svg>...checkmark...</svg></span>
    <span class="ws-menu-item__label">General Liability</span>
  </button>

  <div class="ws-menu-divider"></div>

  <!-- Danger action -->
  <button class="ws-menu-item is-danger">
    <span class="ws-menu-item__label">Delete policy</span>
  </button>

</div>

Anatomy

1
Icon .ws-menu-item__icon

16×16 px, secondary color. Turns brand-green on .is-active.

2
Label .ws-menu-item__label

Takes up remaining flex space. Always present.

3
Value / badge / arrow

Right-aligned metadata. Use .ws-menu-item__value for text, .ws-menu-item__badge for counts, .ws-menu-item__arrow for sub-menu chevrons.

4
Check / radio

Selection controls — use .ws-menu-item__check for multi-select, .ws-menu-item__radio for single-select. Add .is-active to the item to show selected state.

Quick filter chips

A horizontal row of toggleable chips for rapid category-level filtering. Shows counts, supports multi-select, and pairs well with a table or card list beneath it.

Single select (status)
Multi select (policy type)
<div class="ws-quick-filters">
  <button class="ws-quick-chip is-active">
    All <span class="ws-quick-chip__count">127</span>
  </button>
  <button class="ws-quick-chip">
    Active <span class="ws-quick-chip__count">84</span>
  </button>
  <button class="ws-quick-chip">Renewing</button>
</div>

Filter bar

A composed strip combining a search input, removable active-filter chips, and an “Add filter” trigger. Applied filters are shown as chips so users see exactly what is active and can remove individual filters independently.

With active filters
Status: Active Type: GL, WC Expires: Next 30 days
No active filters
<div class="ws-filter-bar-full">

  <!-- Search input -->
  <div class="ws-search-wrap">
    <svg class="ws-search-icon">...</svg>
    <input class="ws-input" type="search" placeholder="Search..." />
  </div>

  <!-- Active filter chips -->
  <div class="ws-active-filters">
    <span class="ws-filter-chip-active">
      <span class="ws-filter-chip-active__label">Status:</span> Active
      <button class="ws-filter-chip-active__remove" aria-label="Remove">&times;</button>
    </span>
    <button class="ws-btn ws-btn--tertiary ws-btn--sm">Clear all</button>
  </div>

  <!-- Add filter trigger -->
  <button class="ws-filter-trigger">
    <svg>...</svg> Add filter
  </button>

</div>

Filter panel

The dropdown that opens from the “Add filter” or “Filter” trigger. Hosts checkbox lists, radio groups, date range inputs, and min/max inputs depending on the filter type.

Multi-select
Policy type
Date range
Expiry date
Quick select
Custom range
Single select
Status 
<div class="ws-filter-panel">
  <div class="ws-filter-panel__header">
    <span class="ws-filter-panel__title">Policy type</span>
    <button class="ws-filter-panel__clear">Clear</button>
  </div>

  <div class="ws-filter-panel__body">
    <!-- Optional search within list -->
    <div class="ws-search-wrap">...</div>

    <!-- Checkbox items -->
    <button class="ws-menu-item is-active">
      <span class="ws-menu-item__check"><svg>...</svg></span>
      <span class="ws-menu-item__label">General Liability</span>
      <span class="ws-menu-item__badge">42</span>
    </button>
  </div>

  <div class="ws-filter-panel__footer">
    <button class="ws-btn ws-btn--secondary ws-btn--sm">Cancel</button>
    <button class="ws-btn ws-btn--primary ws-btn--sm">
      Apply <span class="ws-filter-count">2</span>
    </button>
  </div>
</div>

Composing filter groups

A complete data-view header combining quick-filter chips above the table with a search + filter bar. This is the standard filter pattern for policy lists, claim queues, and client tables in WS Connect.

Type: GL, WC Expires: 30 days
Client Policy Type Expiry Status
Acme Manufacturing Co.WS-2026-004471General Liability14 Mar 2027Active
Bright Horizons LLCWS-2026-003812Workers' Comp01 Feb 2027Renewing
Cascade Systems Inc.WS-2026-002209General Liability22 Jan 2027Renewing
Delta Logistics GroupWS-2025-009941Workers' Comp31 Dec 2026Expired
 
<!-- Quick chips -->
<div class="ws-quick-filters">
  <button class="ws-quick-chip is-active">All <span class="ws-quick-chip__count">127</span></button>
  <button class="ws-quick-chip">Active</button>
  <button class="ws-quick-chip">Renewing</button>
</div>

<!-- Filter bar -->
<div class="ws-filter-bar-full">
  <div class="ws-search-wrap">...</div>
  <div class="ws-active-filters">
    <span class="ws-filter-chip-active">
      <span class="ws-filter-chip-active__label">Type:</span> GL, WC
      <button class="ws-filter-chip-active__remove">&times;</button>
    </span>
  </div>
  <button class="ws-filter-trigger is-active">
    Filter <span class="ws-filter-count">2</span>
  </button>
</div>

<!-- Table or card list -->
<table class="ws-table">...</table>
Construction rule

Quick-filter chips filter by a single dimension (e.g. status). The filter bar handles multi-dimensional filtering (type + date + status simultaneously). Never duplicate the same dimension in both layers — if status chips are present, remove status from the filter bar dropdown.