<zg-checkbox>

Interactive Storybook Playground

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

ZGCell Relationships
Component Relationship Type Ancestor
ZGButton Child Generated ZGBody
ZGCheckbox Child Generated ZGBody
ZGIcon Child Generated ZGBody
ZGInput Child Generated ZGBody
ZGSelect Child Generated ZGBody
ZGText Child Generated ZGBody

Related Web Components

Usage

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

<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:

<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>
Top

Attributes

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

Example Usage

<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

Boolean

Description

Presence of attribute determines if the checkbox is checked

Default Value

""

Accepted Values

  • N/A
Demo
Top

CSS Variables

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

Top

CSS Selector

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

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

CSS Shadow Parts

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

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 or our Styling Basics guide to learn more about styling the grid.

ZGCheckbox CSS Shadow Parts
Name Description
text The text container
Top

Slots

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

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

Below is a list of all the associated ZGCheckbox slots. Check out the full list of slots.

ZGCheckbox Slots
Name Description Demo
Checkbox label.
Top

[api: <zg-checkbox>]