---
title: Filter bar
description: The search line above a list.
---

```tsx
import { FilterBar, Input } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function FilterBarBasic() {
  return (
    <Preview block={true}>
      <FilterBar.Root>
        <FilterBar.Controls>
          <Input.Root aria-label="Search" placeholder="Search" type="search" />
        </FilterBar.Controls>
      </FilterBar.Root>
    </Preview>
  );
}
```

- `FilterBar.Controls` holds the search [Input](/deft/components/input), which takes the free width.
- No count or sorting here: the [DataTable](/deft/composed/data-table) below sorts by its column headers.
- The bar has no padding of its own: the page layout places it. Pickers and the period live in the page header and its sidebar, not here.

## API

Parts: `Root`, `Controls`. Other props go to the native `div`.