---
title: "ZingGrid Web Component: `<zg-search>` | Docs"
description: "View our in depth tutorial covering the web component `<zg-search>` tag and the associated features for the JavaScript grid."
url: https://www.zinggrid.com/docs/api/tags/zg-search
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/api/tags/zg-search.md
mode: provenance
representation: markdown
origin_response_id: 8c9176a66fea337342308d2d755a73e4
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.648Z
version_nonce: 892b50d0b1eca58b871d08f5f5ff84db
generated_at_utc: 2026-11-06T16:32:59.128Z
response_nonce: 0b86481f95dcbe35583a048effbbc178
```

# `<zg-search>`

[Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/components-zg-search--docs)

The `<zg-search>` tag is a web component that is used to encapsulate the interface component necessary to search the grid. The element is added dynamically when search is specified and **should not be directly inserted by the user**. The search bar is styleable via CSS variables or the `zg-search` CSS selector.

![Image of the DOM relationship for the zg-search web component tag](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/v2/zg-search-web-component-dom.png "Image of the DOM relationship for the zg-search web component tag")

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZGCaption](https://www.zinggrid.com/docs/api/tags/zg-caption) | Parent | Generated | n/a |
| [ZGButton](https://www.zinggrid.com/docs/api/tags/zg-button) | Child | Generated | n/a |

#### Related Web Components

- [`<zing-grid>`](https://www.zinggrid.com/docs/api/tags/zing-grid/)
- [`<zg-button>`](https://www.zinggrid.com/docs/api/tags/zg-button/)
- [`<zg-caption>`](https://www.zinggrid.com/docs/api/tags/zg-caption/)
- [`<zg-header>`](https://www.zinggrid.com/docs/api/tags/zg-header/)

## Usage

A `<zg-search>` tag can be triggered by adding the `search` attribute on the `<zing-grid>` tag, like so:

```html
<zing-grid search
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
</zing-grid>
```

## Attributes

There are no attributes available for the `<zg-search>` web component.

## CSS Variables
`<zg-search>` can be styled with CSS variables, like so:

```css
:root {
  --zg-search-background: red;
}
```

Below is a list of all the associated `--zg-search` CSS variables. Check out the [full list of CSS variables](https://www.zinggrid.com/docs/api/css-variables/reference/) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid.

| Name | Default | Description | Demo |
| --- | --- | --- | --- |
| `--zg-search-background` | Browser's default value | Styles the background of search input field | [Example code](https://app.zingsoft.com/demos/embed/IYW53NTF) |
| `--zg-search-border` | 0 | Styles the border of search input field | [Example code](https://app.zingsoft.com/demos/embed/4PDUZTH1) |
| `--zg-search-border-bottom` | var(--zg-search-border, 0) | Styles the bottom border of search input field | [Example code](https://app.zingsoft.com/demos/embed/3JVK4H1O) |
| `--zg-search-border-left` | var(--zg-search-border, 0) | Styles the left border of search input field | [Example code](https://app.zingsoft.com/demos/embed/YDSOVV4E) |
| `--zg-search-border-radius` | 0 | Applies border radius to search input field | [Example code](https://app.zingsoft.com/demos/embed/KXLSPBB4) |
| `--zg-search-border-right` | var(--zg-search-border, 0) | Styles the right border of search input field | [Example code](https://app.zingsoft.com/demos/embed/79MXY4RD) |
| `--zg-search-border-top` | var(--zg-search-border, 0) | Styles the top border of search input field | [Example code](https://app.zingsoft.com/demos/embed/BVEFKOAX) |
| `--zg-search-color` | var(--theme-color_alt) | Sets the font color of search input field | [Example code](https://app.zingsoft.com/demos/embed/P6DBIQ77) |
| `--zg-search-font-size` | vd | Sets the font size of search input field | [Example code](https://app.zingsoft.com/demos/embed/0ZWF57WG) |
| `--zg-search-font-weight` | var(--theme-font-weight) | Sets the font weight of search input field | [Example code](https://app.zingsoft.com/demos/embed/C460WKFJ) |
| `--zg-search-height` | 32px | Sets the height of search input field | [Example code](https://app.zingsoft.com/demos/embed/VHSG3LZG) |
| `--zg-search-padding` | 0 10px 0 15px | Sets the padding of search input field | [Example code](https://app.zingsoft.com/demos/embed/I9PHNPDX) |

## CSS Selector

`<zg-search>` can be styled by common CSS selectors, like so:

```css
zg-search {
  background: red;
}
```

## CSS Shadow Parts

`<zg-search>` exposed elements within the shadow can be styled by CSS shadow parts, like so:

```css
zg-search::part(search) {
  background-color: red;
}
```

Below is a list of all the associated ZGSearch shadow parts. Check out the [full list of CSS shadow parts](https://www.zinggrid.com/docs/api/styling/css-shadow-parts) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid.

| Name | Description |
| --- | --- |
| `input` | The container for the search input field |
| `search` | The container for the search |

## Slots

There are no slots available for the `<zg-search>` web component.