zg-input

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

value

String

Description

The value of the input.

Default Value

""

Accepted Values

  • "6"
Demo

CSS Variables

All the associated --zg-input CSS variables. You can find the full list of css variables or check out our styling basics to learn more about styling the grid.

root: {
  --zg-input-background: red;
}
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.

zg-input {
  background: red;
}