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

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/api/tags/zg-select.md
mode: provenance
representation: markdown
origin_response_id: 730c2abff2ee7d1139c275c22bd405a4
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.649Z
version_nonce: ba14a49e6aa2492d07b2435a10c8215a
generated_at_utc: 2026-11-01T20:03:43.220Z
response_nonce: 090247e0857aadce6d55a8c3c7df1b3a
```

# `<zg-select>`

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

The `<zg-select>` tag is a web component that serves as the grid's custom dropdown and used as a CSS target for styling by the developer.. **The `<zg-select>` web component should not be accessed specifically beyond styling.**

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

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZGCaption](https://www.zinggrid.com/docs/api/tags/zg-caption) | Parent | Manual | n/a |
| [ZGCard](https://www.zinggrid.com/docs/api/tags/zg-card) | Parent | Manual | n/a |
| [ZGCell](https://www.zinggrid.com/docs/api/tags/zg-cell) | Parent | Generated | [ZGBody](https://www.zinggrid.com/docs/api/tags/zg-body) |
| [ZGColumn](https://www.zinggrid.com/docs/api/tags/zg-column) | Parent | Manual | n/a |
| [ZGDialog](https://www.zinggrid.com/docs/api/tags/zg-dialog) | Parent | Manual | n/a |
| [ZGFooter](https://www.zinggrid.com/docs/api/tags/zg-footer) | Parent | Manual | n/a |
| [ZGLoadMask](https://www.zinggrid.com/docs/api/tags/zg-load-mask) | Parent | Manual | n/a |
| [ZGMenu](https://www.zinggrid.com/docs/api/tags/zg-menu) | Parent | Manual | n/a |
| [ZGNoData](https://www.zinggrid.com/docs/api/tags/zg-no-data) | Parent | Manual | n/a |
| [ZGPager](https://www.zinggrid.com/docs/api/tags/zg-pager) | Parent | Generated, Manual | n/a |
| [ZGSource](https://www.zinggrid.com/docs/api/tags/zg-source) | Parent | Manual | n/a |
| [ZGOptionList](https://www.zinggrid.com/docs/api/tags/zg-option-list) | Child | Generated | n/a |

#### Related Web Components

- [`<zg-option-list>`](https://www.zinggrid.com/docs/api/tags/zg-option-list)
- [`<zg-pager>`](https://www.zinggrid.com/docs/api/tags/zg-pager)

## Usage

The `<zg-select>` element is a generated element added to `<zg-pager>` when the `pager` attribute is defined.

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

## Attributes

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

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

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

Below is a list of all the associated `<zg-select`> 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-select-arrow-border` | 0 | Styles the border of the select arrow button | [Example code](https://app.zingsoft.com/demos/embed/SWYPNN61) |
| `--zg-select-arrow-border-bottom` | var(--zg-select-arrow-border, 0) | Styles the bottom border of the select arrow button | [Example code](https://app.zingsoft.com/demos/embed/EFHCN5FS) |
| `--zg-select-arrow-border-left` | var(--zg-select-arrow-border, 1px solid var(--theme-border-color)) | Styles the left border of the select arrow button | [Example code](https://app.zingsoft.com/demos/embed/MK7EXGQL) |
| `--zg-select-arrow-border-right` | var(--zg-select-arrow-border, 0) | Styles the right border of the select arrow button | [Example code](https://app.zingsoft.com/demos/embed/1DGO75SG) |
| `--zg-select-arrow-border-top` | var(--zg-select-arrow-border, 0) | Styles the top border of the select arrow button | [Example code](https://app.zingsoft.com/demos/embed/1IT6DL7R) |
| `--zg-select-arrow-color` | #000 | Sets the color select arrow icon. This also sets the font color of the select (`--zg-select-color`). | [Example code](https://app.zingsoft.com/demos/embed/2HTIGGVX) |
| `--zg-select-background` | Browser's default value | Styles the background of the entire select parent wrapper | [Example code](https://app.zingsoft.com/demos/embed/FKASS504) |
| `--zg-select-border` | 1px solid var(--theme-border-color)) | Styles the border of the select | [Example code](https://app.zingsoft.com/demos/embed/C1KEFISX) |
| `--zg-select-border-bottom` | var(--zg-select-border, 1px solid var(--theme-border-color)) | Styles the bottom border of the select | [Example code](https://app.zingsoft.com/demos/embed/318YQ5SY) |
| `--zg-select-border-left` | var(--zg-select-border, 1px solid var(--theme-border-color)) | Styles the left border of the select | [Example code](https://app.zingsoft.com/demos/embed/3DXGEXHM) |
| `--zg-select-border-radius` | var(--zg-select-border-radius, 0) | Sets the border radius of the select | [Example code](https://app.zingsoft.com/demos/embed/90A63X1F) |
| `--zg-select-border-right` | var(--zg-select-border, 1px solid var(--theme-border-color)) | Styles the right border of the select | [Example code](https://app.zingsoft.com/demos/embed/TXSP6105) |
| `--zg-select-border-top` | var(--zg-select-border, 1px solid var(--theme-border-color)) | Styles the top border of the select | [Example code](https://app.zingsoft.com/demos/embed/DSM6AYMB) |
| `--zg-select-color` | var(--zing-grid-color, var(--theme-color)) | Sets the font color of the select | [Example code](https://app.zingsoft.com/demos/embed/LHLU0OLY) |
| `--zg-select-color_active` | var(--theme-color) | Sets the font color of the select option | [Example code](https://app.zingsoft.com/demos/embed/6I5A2CSK) |
| `--zg-select-font-family` | Browser's default value | Sets the font family of the select option | [Example code](https://app.zingsoft.com/demos/embed/QEQSYYSZ) |
| `--zg-select-font-size` | Browser's default value | Sets the font size of the select option | [Example code](https://app.zingsoft.com/demos/embed/DY8BR3BP) |
| `--zg-select-font-weight` | Browser's default value | Sets the font weight of the select option | [Example code](https://app.zingsoft.com/demos/embed/370EUHZ2) |
| `--zg-select-height` | 28px | Sets the minimum height of the select | [Example code](https://app.zingsoft.com/demos/embed/B5HJ4SD8) |
| `--zg-select-line-height` | Browser's default value | Sets the line height of the select option | [Example code](https://app.zingsoft.com/demos/embed/WLLWY3LZ) |
| `--zg-select-min-width` | Browser's default value | Sets the minimum width of select | [Example code](https://app.zingsoft.com/demos/embed/UPQ9KFW0) |
| `--zg-select-text-background` | #fff | Styles the background of the 'text' portion of the zg-select element | [Example code](https://app.zingsoft.com/demos/embed/MZG3WH82) |
| `--zg-select-transform` | Browser's default value | Sets the transform of the select option | [Example code](https://app.zingsoft.com/demos/embed/UCROZGFJ) |
| `--zg-select-trigger-background` | var(--zg-select-arrow-background) | Styles the background of the select arrow button (trigger) | [Example code](https://app.zingsoft.com/demos/embed/VXK1UMDY) |

## CSS Selector

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

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

## CSS Shadow Parts

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

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

Below is a list of all the associated ZGSelect 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 |
| --- | --- |
| `mask` | The container for the selection mask |
| `select` | The container for selection |
| `select` | The container for selection |
| `select-inner` | The inner container for selection |

## Slots

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