SearchFilterInput

Structured search control where each tag represents a field/operator/value filter.

Examples

Default

<SearchFilterInput
  config={config}
  filters={filters}
  onChange={next => setFilters(next)}
/>

With Pre Populated

Clear Search

<SearchFilterInput
  config={config}
  filters={filters}
  onChange={next => setFilters(next)}
/>

All Field Types

<SearchFilterInput
  config={config}
  filters={filters}
  onChange={next => setFilters(next)}
/>

Sizes

Small

Medium

Large

<div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
  <SearchFilterInput
    config={config}
    filters={smFilters}
    label="Small"
    onChange={next => setSmFilters(next)}
    placeholder="Small..."
    size="sm"
  />
  <SearchFilterInput
    config={config}
    filters={mdFilters}
    label="Medium"
    onChange={next => setMdFilters(next)}
    placeholder="Medium..."
    size="md"
  />
  <SearchFilterInput
    config={config}
    filters={lgFilters}
    label="Large"
    onChange={next => setLgFilters(next)}
    placeholder="Large..."
    size="lg"
  />
</div>

Disabled

Name containsJohn

<SearchFilterInput
  config={config}
  filters={[
    {
      field: 'name',
      operator: 'contains',
      value: {type: 'string', value: 'John'},
    },
  ]}
  isDisabled
  onChange={() => {}}
/>

Read Only

Name containsJohnStatus isActive

<SearchFilterInput
  config={config}
  filters={[
    {
      field: 'name',
      operator: 'contains',
      value: {type: 'string', value: 'John'},
    },
    {
      field: 'status',
      operator: 'is',
      value: {type: 'enum', value: 'active'},
    },
  ]}
  isReadOnly
  onChange={() => {}}
/>

With Result Count

42 results

<SearchFilterInput
  config={config}
  filters={filters}
  onChange={next => setFilters(next)}
  resultCount={42}
/>

With Visible Label

Filter users

<SearchFilterInput
  config={config}
  filters={filters}
  isLabelHidden={false}
  label="Filter users"
  onChange={next => setFilters(next)}
/>

With Error Status

At least one filter is required

<SearchFilterInput
  config={config}
  filters={filters}
  onChange={next => setFilters(next)}
  status={{type: 'error', message: 'At least one filter is required'}}
/>

With Many Filters

Clear Search

<div style={{maxWidth: 600}}>
  <SearchFilterInput
    config={config}
    filters={filters}
    onChange={next => setFilters(next)}
    tagOverflowBehavior="unfocusedInline"
  />
</div>

With Custom Components

Clear Search

<SearchFilterInput
  components={components}
  config={config}
  filters={filters}
  onChange={next => setFilters(next)}
/>

With Timezone

America/Los_Angeles

Clear America/Los_Angeles

America/New_York

Clear America/New_York

Europe/London

Clear Europe/London

Asia/Tokyo

Clear Asia/Tokyo

<div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
  {timezones.map(timezone => (
    <SearchFilterInput
      config={config}
      filters={filters}
      isLabelHidden={false}
      key={timezone}
      label={timezone}
      onChange={() => {}}
      timezoneID={timezone}
    />
  ))}
</div>

API

SearchFilterInput

Structured search control where each tag represents a field/operator/value filter.

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS class names applied to the input wrapper.
`components`	`SearchFilterInputComponents`	—	Per-value-type component overrides.
`config`*	`SearchFilterInputConfig`	—	SearchFilterInput field/operator configuration.
`data-testid`	`string`	—	Test ID applied to the input wrapper.
`endContent`	`ReactNode`	—	Content displayed at the end of the input row.
`filters`*	`ReadonlyArray<SearchFilterInputFilter>`	—	Current filters.
`handleRef`	`Ref<SearchFilterInputHandle>`	—	Imperative focus/blur handle.
`hasAutoFocus`	`boolean`	`false`	Whether to focus the input on mount.
`hasClear`	`boolean`	`true`	Whether to show a clear button.
`isDisabled`	`boolean`	`false`	Whether the input is disabled.
`isLabelHidden`	`boolean`	`true`	Whether to visually hide the label.
`isReadOnly`	`boolean`	`false`	Whether filters are read-only.
`label`	`string`	`'Search'`	Accessible label.
`maxOperatorMenuItems`	`number`	—	Maximum number of items shown in the operator dropdown menu. When set, only the first N operators are displayed.
`maxTagLength`	`number`	`40`	Maximum displayed tag value length.
`onBlur`	`(event: FocusEvent<HTMLDivElement>) => void`	—	Called when focus leaves the control.
`onChange`*	`( filters: ReadonlyArray<SearchFilterInputFilter>, changeType: SearchFilterInputChangeType, index: number, ) => void`	—	Called when filters change.
`onFocus`	`(event: FocusEvent<HTMLDivElement>) => void`	—	Called when focus enters the control.
`placeholder`	`string`	`'Search...'`	Placeholder text.
`popoverSaveButtonLabel`	`string`	`'Apply'`	Save button label in the edit popover.
`ref`	`Ref<HTMLDivElement>`	—	Ref forwarded to the root element.
`resultCount`	`number \| string`	—	Result count displayed at end of row.
`size`	`"sm" \| "md" \| "lg"`	`'md'`	Visual size.
`startIcon`	`IconComponent`	—	Icon shown before the input.
`status`	`InputStatus`	—	Validation status displayed below the input.
`style`	`CSSProperties`	—	Inline styles applied to the input wrapper.
`tagOverflowBehavior`	`"none" \| "unfocusedInline" \| "unfocusedLayer"`	`'none'`	Controls how tags overflow when the container is too narrow. - `'none'`: Tags wrap to multiple lines (default). - `'unfocusedInline'`: Single line with "+ N more" when unfocused; expands inline on focus. - `'unfocusedLayer'`: Single line with "+ N more" when unfocused; expands as overlay on focus.
`timezoneID`	`string`	—	Timezone ID for date formatting.

SearchFilterInputEditPopover

Prop	Type	Default	Description
`config`*	`InternalSearchFilterInputConfig`	—	Internal config lookup helpers.
`filter`*	`PartialFilter`	—	Partial filter being created or edited.
`isReadOnly`	`boolean`	`false`	Whether controls are read-only.
`maxOperatorMenuItems`	`number`	—	Maximum number of items shown in the operator dropdown menu.
`mode`*	`'create' \| 'edit'`	—	Editor mode.
`onCancel`*	`() => void`	—	Called when editing is cancelled.
`onSave`*	`(filter: SearchFilterInputFilter \| null) => void`	—	Called with a completed filter, or null to delete.
`saveButtonLabel`	`string`	`'Apply'`	Save button label.

SearchFilterInputTag

Default tag renderer for a SearchFilterInput filter.

Prop	Type	Default
`config`*	`SearchFilterInputConfig`	—
`field`*	`SearchFilterInputField`	—
`filter`*	`SearchFilterInputFilter`	—
`isDisabled`	`boolean`	—
`maxLength`*	`number`	—
`onClick`	`() => void`	—
`onRemove`	`() => void`	—
`operator`*	`SearchFilterInputOperator`	—