<zg-input>

Version 1

Interactive Storybook Playground

The <zg-input> tag is a web component that contains input fields with native ZingGrid-specific functionality.

Related Web Components

• <zing-grid>
• <zg-pager>
• <zg-text>

Usage

A <zg-input> tag can be set via the action attribute.

<zing-grid src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-caption>
    <zg-input action="currpage"></zg-input>
    <zg-input value="hello world"></zg-input>
  </zg-caption>
</zing-grid>

Attributes

There are a couple attributes to help position the <zg-input> element in the grid and align the text within the <zg-input>.

CSS Variables

<zg-input> can be styled with CSS variables, like so:

:root {
  --zg-input-background: red;
}

Below is a list of all the associated --zg-input CSS variables. Check out the full list of CSS variables or our Styling Basics guide to learn more about styling the grid.

CSS Selector

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

zg-input {
  background: red;
}

CSS Shadow Parts

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

zg-input::part(input) {
  background-color: red;
}

Below is a list of all the associated ZGInput shadow parts. Check out the full list of CSS shadow parts or our Styling Basics guide to learn more about styling the grid.

Slots

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

<!-- Default slot -->
<zg-input>Slotted Content</zg-input>

<!-- Named slot -->
<zg-input><span slot="input">Slotted Content</span></zg-input>

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