<zg-input>

Interactive Storybook Playground

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

Image of the DOM relationship for the zg-input web component tag

Related Web Components

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

action

String

Description

The built-in behavior and display of the input. Gets and sets the associated grid property.

Default Value

""

Accepted Values

  • "currpage"
Demo

type

String

Description

The type of the input if not using a built-in action

Default Value

"text"

Accepted Values

  • "password"
Demo

value

String

Description

The value of the input

Default Value

""

Accepted Values

  • "6"
Demo

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.

ZGInput CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-input-background#fffStyles the background of input field
--zg-input-border1px solid var(--theme-border-color)Styles the border of input field
--zg-input-border-bottomvar(--zg-input-border, 1px solid var(--theme-border-color))Styles the bottom border of input field
--zg-input-border-bottom_focusvar(--zg-input-border_focus, 1px solid rgba(82, 168, 236, 0.8))Styles the bottom border of input field on focus
--zg-input-border-leftvar(--zg-input-border, 1px solid var(--theme-border-color))Styles the left border of input field
--zg-input-border-left_focusvar(--zg-input-border_focus, )))Styles the left border of input field on focus
--zg-input-border-radiusBrowser's default valueApplies a border radius to the input
--zg-input-border-rightvar(--zg-input-border, 1px solid var(--theme-border-color))Styles the right border of input field
--zg-input-border-right_focusvar(--zg-input-border_focus, )))Styles the right border of input field in modal on focus
--zg-input-border-topvar(--zg-input-border, 1px solid var(--theme-border-color))Styles the top border of input field
--zg-input-border-top_focusvar(--zg-input-border_focus, )))Styles the top border of input field in modal on focus
--zg-input-border_focus1px solid rgba(82, 168, 236, 0.8)Styles the border of input field on focus
--zg-input-box-shadownoneApplies a box shadow behind input field
--zg-input-colorvar(--zing-grid-color, var(--theme-color))Sets the font color of input field
--zg-input-color_focusvar(--zg-input-color)Sets the font color of input field in modal on focus
--zg-input-font-familyinheritSets the font family of input field
--zg-input-font-sizeinheritSets the font size of input field
--zg-input-font-size_focusinheritSets the font size of input field on focus
--zg-input-font-styleinheritSets the font style of input field
--zg-input-font-weightinheritSets the font weight of input field
--zg-input-height28pxSets the height of input field
--zg-input-line-heightinheritSets the line height of input field
--zg-input-margin0Sets the margin of input field
--zg-input-padding0 6pxSets the padding of input field
--zg-input-text-aligncenterSets the text alignment of input field
--zg-input-transformBrowser's default valueSets the transform of input field
--zg-input-transform_focusBrowser's default valueSets the transform of input field in modal on focus
--zg-input-width28pxSets the width of input field

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.

ZGInput CSS Shadow Parts
NameDescriptionDemo
inputThe input field wrapper

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.

ZGInput Slots
NameDescriptionDemo
Content after input field.
inputContent before input field.

[api: <zg-input>]