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

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
Top

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
Name Default Description Demo CSS Ref
--zg-input-background #fff Styles the background of input field
--zg-input-border 1px solid var(--theme-border-color) Styles the border of input field
--zg-input-border-bottom var(--zg-input-border, 1px solid var(--theme-border-color)) Styles the bottom border of input field
--zg-input-border-bottom_focus var(--zg-input-border_focus, 1px solid rgba(82, 168, 236, 0.8)) Styles the bottom border of input field on focus
--zg-input-border-left var(--zg-input-border, 1px solid var(--theme-border-color)) Styles the left border of input field
--zg-input-border-left_focus var(--zg-input-border_focus, ))) Styles the left border of input field on focus
--zg-input-border-radius Browser's default value Applies a border radius to the input
--zg-input-border-right var(--zg-input-border, 1px solid var(--theme-border-color)) Styles the right border of input field
--zg-input-border-right_focus var(--zg-input-border_focus, ))) Styles the right border of input field in modal on focus
--zg-input-border-top var(--zg-input-border, 1px solid var(--theme-border-color)) Styles the top border of input field
--zg-input-border-top_focus var(--zg-input-border_focus, ))) Styles the top border of input field in modal on focus
--zg-input-border_focus 1px solid rgba(82, 168, 236, 0.8) Styles the border of input field on focus
--zg-input-box-shadow none Applies a box shadow behind input field
--zg-input-color var(--zing-grid-color, var(--theme-color)) Sets the font color of input field
--zg-input-color_focus var(--zg-input-color) Sets the font color of input field in modal on focus
--zg-input-font-family inherit Sets the font family of input field
--zg-input-font-size inherit Sets the font size of input field
--zg-input-font-size_focus inherit Sets the font size of input field on focus
--zg-input-font-style inherit Sets the font style of input field
--zg-input-font-weight inherit Sets the font weight of input field
--zg-input-height 28px Sets the height of input field
--zg-input-line-height inherit Sets the line height of input field
--zg-input-margin 0 Sets the margin of input field
--zg-input-padding 0 6px Sets the padding of input field
--zg-input-text-align center Sets the text alignment of input field
--zg-input-transform Browser's default value Sets the transform of input field
--zg-input-transform_focus Browser's default value Sets the transform of input field in modal on focus
--zg-input-width 28px Sets the width of input field
Top

CSS Selector

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

zg-input {
  background: red;
}
Top

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
Name Description Demo
Content after input field.
input Content before input field.
Top

[api: <zg-input>]