--- title: "ZingGrid Web Component: `` | Docs" description: "View our in depth tutorial covering the web component `` tag and the associated features for the JavaScript grid." url: https://www.zinggrid.com/docs/api/tags/zg-input --- ```text experiment_id: web-retrieval-v1 fixture_id: /docs/api/tags/zg-input.md mode: provenance representation: markdown origin_response_id: f58aeca639ae81fa5420422ca9ec0215 version: 2026-10-21 version_created_at_utc: 2026-10-21T20:42:35.638Z version_nonce: 8e4608e0965ad307efda592e0ac61016 generated_at_utc: 2026-11-09T16:15:17.203Z response_nonce: 220fe062ee376778db583e268b35f1cf ``` # `` [Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/components-zg-input--docs) The `` 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](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/v2/zg-input-web-component-dom.png "Image of the DOM relationship for the zg-input web component tag") | Component | Relationship | Type | Ancestor | | --- | --- | --- | --- | | [ZGCaption](https://www.zinggrid.com/docs/api/tags/zg-caption) | Parent | Manual | n/a | | [ZGCard](https://www.zinggrid.com/docs/api/tags/zg-card) | Parent | Manual | n/a | | [ZGCell](https://www.zinggrid.com/docs/api/tags/zg-cell) | Parent | Generated | [ZGBody](https://www.zinggrid.com/docs/api/tags/zg-body) | | [ZGColumn](https://www.zinggrid.com/docs/api/tags/zg-column) | Parent | Manual | n/a | | [ZGDialog](https://www.zinggrid.com/docs/api/tags/zg-dialog) | Parent | Manual | n/a | | [ZGFooter](https://www.zinggrid.com/docs/api/tags/zg-footer) | Parent | Manual | n/a | | [ZGLoadMask](https://www.zinggrid.com/docs/api/tags/zg-load-mask) | Parent | Manual | n/a | | [ZGMenu](https://www.zinggrid.com/docs/api/tags/zg-menu) | Parent | Manual | n/a | | [ZGNoData](https://www.zinggrid.com/docs/api/tags/zg-no-data) | Parent | Manual | n/a | | [ZGPager](https://www.zinggrid.com/docs/api/tags/zg-pager) | Parent | Generated, Manual | n/a | | [ZGSource](https://www.zinggrid.com/docs/api/tags/zg-source) | Parent | Manual | n/a | #### Related Web Components - [``](https://www.zinggrid.com/docs/api/tags/zing-grid/) - [``](https://www.zinggrid.com/docs/api/tags/zg-pager/) - [``](https://www.zinggrid.com/docs/api/tags/zg-text/) ## Usage A `` tag can be set via the `action` attribute. ```html ``` ## Attributes There are a couple attributes to help position the `` element in the grid and align the text within the ``. **** ### action The built-in behavior and display of the input. Gets and sets the associated grid property. - Type: String - Default: `""` - Accepted values: "currpage" - Supported versions: 1.x, 2.x [Example code](https://app.zingsoft.com/demos/embed/M64BDXP3) ### type The type of the input if not using a built-in action - Type: String - Default: `"text"` - Accepted values: "password" - Supported versions: 1.x, 2.x [Example code](https://app.zingsoft.com/demos/embed/T37LYIM7) ### value The value of the input - Type: String - Default: `""` - Accepted values: "6" - Supported versions: 1.x, 2.x [Example code](https://app.zingsoft.com/demos/embed/AF5361VU) ## CSS Variables `` can be styled with CSS variables, like so: ```css :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](https://www.zinggrid.com/docs/api/css-variables/reference/) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid. | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-input-background` | #fff | Styles the background of input field | [Example code](https://app.zingsoft.com/demos/embed/QTKU281K) | | `--zg-input-border` | 1px solid var(--theme-border-color) | Styles the border of input field | [Example code](https://app.zingsoft.com/demos/embed/DDD2BCSL) | | `--zg-input-border_focus` | 1px solid rgba(82, 168, 236, 0.8) | Styles the border of input field on focus | [Example code](https://app.zingsoft.com/demos/embed/I3GK9SS3) | | `--zg-input-border-bottom` | var(--zg-input-border, 1px solid var(--theme-border-color)) | Styles the bottom border of input field | [Example code](https://app.zingsoft.com/demos/embed/MDMU28K6) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/2SM40FSO) | | `--zg-input-border-left` | var(--zg-input-border, 1px solid var(--theme-border-color)) | Styles the left border of input field | [Example code](https://app.zingsoft.com/demos/embed/JLCD44RA) | | `--zg-input-border-left_focus` | var(--zg-input-border_focus, ))) | Styles the left border of input field on focus | [Example code](https://app.zingsoft.com/demos/embed/FQ51FTQF) | | `--zg-input-border-radius` | Browser's default value | Applies a border radius to the input | [Example code](https://app.zingsoft.com/demos/embed/EPJYLC6I) | | `--zg-input-border-right` | var(--zg-input-border, 1px solid var(--theme-border-color)) | Styles the right border of input field | [Example code](https://app.zingsoft.com/demos/embed/8A95H8P7) | | `--zg-input-border-right_focus` | var(--zg-input-border_focus, ))) | Styles the right border of input field in modal on focus | [Example code](https://app.zingsoft.com/demos/embed/11XL0MH6) | | `--zg-input-border-top` | var(--zg-input-border, 1px solid var(--theme-border-color)) | Styles the top border of input field | [Example code](https://app.zingsoft.com/demos/embed/LCS35KDI) | | `--zg-input-border-top_focus` | var(--zg-input-border_focus, ))) | Styles the top border of input field in modal on focus | [Example code](https://app.zingsoft.com/demos/embed/BLSGA86T) | | `--zg-input-box-shadow` | none | Applies a box shadow behind input field | [Example code](https://app.zingsoft.com/demos/embed/18VIQFAN) | | `--zg-input-color` | var(--zing-grid-color, var(--theme-color)) | Sets the font color of input field | [Example code](https://app.zingsoft.com/demos/embed/XOU2K69C) | | `--zg-input-color_focus` | var(--zg-input-color) | Sets the font color of input field in modal on focus | [Example code](https://app.zingsoft.com/demos/embed/62OIL7CR) | | `--zg-input-font-family` | inherit | Sets the font family of input field | [Example code](https://app.zingsoft.com/demos/embed/T5ZCU5MK) | | `--zg-input-font-size` | inherit | Sets the font size of input field | [Example code](https://app.zingsoft.com/demos/embed/2N4JCUM7) | | `--zg-input-font-size_focus` | inherit | Sets the font size of input field on focus | [Example code](https://app.zingsoft.com/demos/embed/BPE8TYD5) | | `--zg-input-font-style` | inherit | Sets the font style of input field | [Example code](https://app.zingsoft.com/demos/embed/23LLZSPN) | | `--zg-input-font-weight` | inherit | Sets the font weight of input field | [Example code](https://app.zingsoft.com/demos/embed/D4KPNBOE) | | `--zg-input-height` | 28px | Sets the height of input field | [Example code](https://app.zingsoft.com/demos/embed/B0P81J0Q) | | `--zg-input-margin` | 0 | Sets the margin of input field | [Example code](https://app.zingsoft.com/demos/embed/QIT4GPWJ) | | `--zg-input-padding` | 0 6px | Sets the padding of input field | [Example code](https://app.zingsoft.com/demos/embed/6YX1BW65) | | `--zg-input-text-align` | center | Sets the text alignment of input field | [Example code](https://app.zingsoft.com/demos/embed/19KNP52I) | | `--zg-input-transform` | Browser's default value | Sets the transform of input field | [Example code](https://app.zingsoft.com/demos/embed/OSSRVJZZ) | | `--zg-input-transform_focus` | Browser's default value | Sets the transform of input field in modal on focus | [Example code](https://app.zingsoft.com/demos/embed/ZCZMD7I3) | | `--zg-input-width` | 28px | Sets the width of input field | [Example code](https://app.zingsoft.com/demos/embed/SCCSW2QV) | ## CSS Selector `` can be styled by common CSS selectors, like so: ```css zg-input { background: red; } ``` ## CSS Shadow Parts `` exposed elements within the shadow can be styled by CSS shadow parts, like so: ```css 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](https://www.zinggrid.com/docs/api/styling/css-shadow-parts) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid. | Name | Description | | --- | --- | | `input` | The input field wrapper | ## Slots `` contains placeholders to allow adding markup inside the component. ```html Slotted Content Slotted Content ``` Below is a list of all the associated ZGInput slots. Check out the [full list of slots](https://www.zinggrid.com/docs/api/styling/css-shadow-parts). | Name | Description | | --- | --- | | (default) | Content after input field. | | `input` | Content before input field. |