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

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/api/tags/zg-checkbox.md
mode: provenance
representation: markdown
origin_response_id: 6bf69ef5be6f436c91c11136253ce300
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.622Z
version_nonce: 6a3651c3aeb1e8068e464ad46c0b988f
generated_at_utc: 2026-10-31T01:13:27.139Z
response_nonce: 2805f048a8b8b0ca18be8f490beba809
```

# `<zg-checkbox>`

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

The `<zg-checkbox>` tag is a web component that controls the functionality and styling for checkbox features, such as column type selector. This web component is inserted by the grid or can be manually inserted by the user. The component can be styled by CSS variables or the `zg-checkbox` CSS selector.

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

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZGButton](https://www.zinggrid.com/docs/api/tags/zg-button) | Child | Generated | [ZGBody](https://www.zinggrid.com/docs/api/tags/zg-body) |
| [ZGCheckbox](https://www.zinggrid.com/docs/api/tags/zg-checkbox) | Child | Generated | [ZGBody](https://www.zinggrid.com/docs/api/tags/zg-body) |
| [ZGIcon](https://www.zinggrid.com/docs/api/tags/zg-icon) | Child | Generated | [ZGBody](https://www.zinggrid.com/docs/api/tags/zg-body) |
| [ZGInput](https://www.zinggrid.com/docs/api/tags/zg-input) | Child | Generated | [ZGBody](https://www.zinggrid.com/docs/api/tags/zg-body) |
| [ZGSelect](https://www.zinggrid.com/docs/api/tags/zg-select) | Child | Generated | [ZGBody](https://www.zinggrid.com/docs/api/tags/zg-body) |
| [ZGText](https://www.zinggrid.com/docs/api/tags/zg-text) | Child | Generated | [ZGBody](https://www.zinggrid.com/docs/api/tags/zg-body) |

#### Related Web Components

- [`<zg-button>`](https://www.zinggrid.com/docs/api/tags/zg-button/)
- [`<zg-icon>`](https://www.zinggrid.com/docs/api/tags/zg-body/)
- [`<zg-column>`](https://www.zinggrid.com/docs/api/tags/zg-column/)
- [`<zg-menu>`](https://www.zinggrid.com/docs/api/tags/zg-menu/)

## Usage

`<zg-checkbox>` is automatically inserted when a feature that uses it is enabled, like row selection or column hiding.

```html
<zing-grid
  columns-control
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-column type="selector"></zg-column>
  <zg-column index="name"></zg-column>
  <zg-column index="job"></zg-column>
</zing-grid>
```

Or, `<zg-checkbox>` can be inserted manually:

```html
<zing-grid
  columns-control
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-column index="name"></zg-column>
  <zg-column index="job"></zg-column>
  <zg-column index="custom">
    <zg-checkbox checked></zg-checkbox>
  </zg-column>
</zing-grid>
```

## Attributes

There is a toggle attribute to enable the checkbox to be checked or not checked.

**Example Usage**

```html
<zing-grid
  columns-control
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-column index="name"></zg-column>
  <zg-column index="job"></zg-column>
  <zg-column index="custom">
    <zg-checkbox checked></zg-checkbox>
  </zg-column>
</zing-grid>
```

### checked

Presence of attribute determines if the checkbox is checked

- Type: Boolean
- Default: `""`
- Accepted values: N/A
- Supported versions: 1.x, 2.x

[Example code](https://app.zingsoft.com/demos/embed/W64KXNUL)

## CSS Variables

There are no CSS variables available for the `<zg-checkbox>` web component.

## CSS Selector

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

```css
zg-checkbox {
  border: 1px solid red;
}
```

## CSS Shadow Parts

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

```css
zg-checkbox::part(text) {
  color: red;
}
```

Below is a list of all the associated ZGCheckbox 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 |
| --- | --- |
| `text` | The text container |

## Slots

`<zg-checkbox>` contains placeholders to allow adding markup inside the component.

```html
<zg-checkbox>Slotted Content</zg-checkbox>
```

Below is a list of all the associated ZGCheckbox slots. Check out the [full list of slots](https://www.zinggrid.com/docs/api/styling/css-shadow-parts).

| Name | Description |
| --- | --- |
| (default) | Checkbox label. |