Light Dark System

Input Group

<zn-input-group> | ZnInputGroup
Since 1.0 experimental

A wrapper component that groups inputs and selects visually.

Input Groups allow you to group multiple form controls together into a single visual unit.

<zn-input-group>
  <zn-input placeholder="First Name"></zn-input>
  <zn-input placeholder="Last Name"></zn-input>
</zn-input-group>

Examples

Mixed Inputs and Selects

You can combine inputs and selects.

http:// https:// 
<zn-input-group>
  <zn-select value="http://" style="width: 125px;">
    <zn-option value="http://">http://</zn-option>
    <zn-option value="https://">https://</zn-option>
  </zn-select>
  <zn-input placeholder="example.com"></zn-input>
</zn-input-group>

Multiple Inputs 

<zn-input-group>
  <zn-input placeholder="City"></zn-input>
  <zn-input placeholder="State"></zn-input>
  <zn-input placeholder="Zip"></zn-input>
</zn-input-group>

Labeled Group

Use the label attribute to add a label to the input group.

<zn-input-group label="Personal Information">
  <zn-input placeholder="First Name"></zn-input>
  <zn-input placeholder="Last Name"></zn-input>
</zn-input-group>

Input with Submit Button

Subscribe 
<zn-input-group>
  <zn-input placeholder="Email Address" type="email"></zn-input>
  <zn-button>Subscribe</zn-button>
</zn-input-group>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.23/dist/components/input-group/input-group.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.23/dist/components/input-group/input-group.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/input-group/input-group.js';

Slots

Name Description
(default) The default slot for inputs and selects.
label The input group’s label. Alternatively, you can use the label attribute.

Learn more about using slots.

Properties

Name Description Reflects Type Default
label The input group’s label. If you need to display HTML, use the label slot. string ''
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name Description
base The component’s base wrapper.
form-control The form control wrapper.
form-control-label The label’s wrapper.
form-control-input The input group container.

Learn more about customizing CSS parts.