InputGroup

The InputGroup component allows you to easily group two or more InputField components.

Import

React

// with @dhl-official/react-library:
import { DhlInputGroup } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlInputGroup } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-input-group></dhl-input-group>

Vue.js

// with @dhl-official/vue-library:
import { DhlInputGroup } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlInputGroup } from "@dhl-official/ui-libraries/vue-library"

Code

React

<DhlInputGroup>
  <DhlInputField
    changeEvent={() => {}}
    variant={{
      label: 'Label',
      placeholder: 'Placeholder',
      type: 'static'
    }}
  />
  <DhlInputField
    changeEvent={() => {}}
    variant={{
      label: 'Label',
      placeholder: 'Placeholder',
      type: 'static'
    }}
  />
</DhlInputGroup>

Angular

<dhl-input-group>
  <dhl-input-field
    [changeEvent]="changeEvent"
    [variant]="variant"
  ></dhl-input-field>
  <dhl-input-field
    [changeEvent]="changeEvent"
    [variant]="variant"
  ></dhl-input-field>
</dhl-input-group>

Vue.js

<dhl-input-group>
  <dhl-input-field
    :changeEvent.prop="() => {}"
    :variant.prop="{
      label: 'Label',
      placeholder: 'Placeholder',
      type: 'static'
    }"
  ></dhl-input-field>
  <dhl-input-field
    :changeEvent.prop="() => {}"
    :variant.prop="{
      label: 'Label',
      placeholder: 'Placeholder',
      type: 'static'
    }"
  ></dhl-input-field>
</dhl-input-group>

Interactive Demo

Migrating to DUIL 1.0

• rightIcon only supports string, a path to the icon or data url for the icon
• Rename disabled to isDisabled
• Remove isBlock

Readme

Properties

Property	Attribute	Description	Type	Default
dataClassName	data-class-name	An optional class name prop for the component.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	dhl-input-group-${getRandomString()}
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
isDisabled	is-disabled	An optional flag to define if the component is disabled.	boolean	false
rightIcon	right-icon	An optional Url of the icon to the display to the right instead of Chevron`.	string	undefined
validation	--	An optional object to set-up a custom components validation state.	{ type: Variants.valid \| Variants.invalid \| Variants.note; message?: string; }	undefined

Slots

Slot	Description
"unnamed"	unnamed children slot intended for multiple DhlInputField components

Dependencies

Used by

• dhl-date-picker
• dhl-date-range-picker

Depends on

• dhl-icon-wrapper
• dhl-icon
• dhl-validation-feedback

Graph

---

Built by DHL User Interface Library Team!