--- title: "ZingGrid Web Component: `` | Docs" description: "View our in depth tutorial covering the web component `` tag and the associated features for the JavaScript grid." url: https://www.zinggrid.com/docs/api/tags/zg-option-list --- ```text experiment_id: web-retrieval-v1 fixture_id: /docs/api/tags/zg-option-list.md mode: provenance representation: markdown origin_response_id: f270fe9851c979281fb255223f7ea34b version: 2026-10-21 version_created_at_utc: 2026-10-21T20:42:35.644Z version_nonce: 61afa8db1c16b38972afe9fa633869c2 generated_at_utc: 2026-11-08T23:36:18.545Z response_nonce: bc7e0cb61b2ba2b292d11deebf96e45a ``` # `` [Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/components-zg-option-list--docs) The `` tag is a web component that goes within `` as the option list and used as a CSS target for styling by the developer. **The `` web component should not be accessed specifically beyond styling.** ![Image of the DOM relationship for the zg-option-list web component tag](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/v2/zg-option-list-web-component-dom.png "Image of the DOM relationship for the zg-option-list web component tag") | Component | Relationship | Type | Ancestor | | --- | --- | --- | --- | | [ZGSelect](https://www.zinggrid.com/docs/api/tags/zg-select) | Parent | Generated | n/a | #### Related Web Components - [``](https://www.zinggrid.com/docs/api/tags/zg-pager) - [``](https://www.zinggrid.com/docs/api/tags/zg-select) ## Usage The `` element is a generated element added to `` when the `pager` attribute is defined. ```html ``` ## Attributes There are no attributes available for the `` web component. ## CSS Variables `` can be styled with CSS variables, like so: ```css :root { --zg-option-list-background: red; } ``` Below is a list of all the associated ` 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-option-list-background` | #fff | Styles the background of option list | [Example code](https://app.zingsoft.com/demos/embed/JCRKBH4Y) | | `--zg-option-list-border` | 1px solid var(--theme-border-color) | Styles the border of option list | [Example code](https://app.zingsoft.com/demos/embed/SQNKOS7B) | | `--zg-option-list-border-bottom` | var(--zg-option-list-border, 1px solid var(--theme-border-color)) | Styles the bottom border of option list | [Example code](https://app.zingsoft.com/demos/embed/31Q5PRQB) | | `--zg-option-list-border-left` | var(--zg-option-list-border, 1px solid var(--theme-border-color)) | Styles the left border of option list | [Example code](https://app.zingsoft.com/demos/embed/3BWGQYG6) | | `--zg-option-list-border-right` | var(--zg-option-list-border, 1px solid var(--theme-border-color)) | Styles the right border of option list | [Example code](https://app.zingsoft.com/demos/embed/SG9TA4DQ) | | `--zg-option-list-border-top` | var(--zg-option-list-border, 1px solid var(--theme-border-color)) | Styles the bottom top of option list | [Example code](https://app.zingsoft.com/demos/embed/CZ8HY148) | | `--zg-option-list-color` | Browser's default value | Styles the color of option list item | [Example code](https://app.zingsoft.com/demos/embed/RLKIPFXB) | | `--zg-option-list-item-background_focus` | var(--theme-color-secondary) | Sets the background of option list item on focus | [Example code](https://app.zingsoft.com/demos/embed/5CHDS97H) | | `--zg-option-list-item-background_hover` | var(--theme-color-secondary) | Sets the background of option list item on hover | [Example code](https://app.zingsoft.com/demos/embed/SQITNDOY) | | `--zg-option-list-item-border` | 0 | Styles the border of option list item | [Example code](https://app.zingsoft.com/demos/embed/VH6WGYS9) | | `--zg-option-list-item-border-bottom` | var(--zg-option-list-item-border, 0) | Styles the bottom border of option list item | [Example code](https://app.zingsoft.com/demos/embed/QCJG4ENK) | | `--zg-option-list-item-border-left` | var(--zg-option-list-item-border, 0) | Styles the left border of option list item | [Example code](https://app.zingsoft.com/demos/embed/DCZNW2UY) | | `--zg-option-list-item-border-right` | var(--zg-option-list-item-border, 0) | Styles the right border of option list item | [Example code](https://app.zingsoft.com/demos/embed/442R7DGZ) | | `--zg-option-list-item-border-top` | var(--zg-option-list-item-border, 0) | Styles the top border of option list item | [Example code](https://app.zingsoft.com/demos/embed/LBZKLEVF) | | `--zg-option-list-item-height` | 32px | Sets the height of option list item | [Example code](https://app.zingsoft.com/demos/embed/LZZDJ4ZH) | | `--zg-option-list-item-line-height` | 32px | Sets the line height of option list item | [Example code](https://app.zingsoft.com/demos/embed/9QGZA2DF) | | `--zg-option-list-item-padding` | 0 15px | Sets the padding of option list item | [Example code](https://app.zingsoft.com/demos/embed/3TSJS7B1) | ## CSS Selector `` can be styled by common CSS selectors, like so: ```css zg-option-list { background: red; } ``` ## CSS Shadow Parts `` exposed elements within the shadow can be styled by CSS shadow parts, like so: ```css zg-option-list::part(list) { background-color: red; } ``` Below is a list of all the associated ZGOptionList 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 | | --- | --- | | `list` | The container for the option list | ## Slots There are no slots available for the `` web component.