# presentation/components/filter.component.ts

> 17 lines of code and 4 definitions.

Tree: Site tree
Language: typescript
Layer: product
Canonical: https://banes-lab.com/anatomy/tree#file-presentation-components-filter-component-ts
Source text: https://banes-lab.com/assets/sources/source.345ad452da4cd5b41b1d4a14f4d283be80f97a868c08d5cf0ff9298c31bba518.generated.txt

## Definitions

- `INPUT_EVENT` (lexical_declaration, line 3)
- `SEARCH_TYPE` (lexical_declaration, line 4)
- `createFilterBox` (lexical_declaration, line 6, exported)
- `input` (lexical_declaration, line 11, exported)

## Source

```typescript
import { createElement } from "#core/factories/element.factory";

const INPUT_EVENT = "input";
const SEARCH_TYPE = "search";

export const createFilterBox = function createFilterBox(
    placeholder: string,
    label: string,
    onQuery: (query: string) => void,
): HTMLInputElement {
    const input = createElement("input", {
        attributes: { "aria-label": label, placeholder, type: SEARCH_TYPE },
        className: "filter-box",
    });
    input.addEventListener(INPUT_EVENT, () => {
        onQuery(input.value.trim().toLowerCase());
    });
    return input;
};
```