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
addon	addon	An optional prop for the component to display prefix or suffix addon.	{ type: "prefix" | "suffix"; label: string; colorVariant?: ColorVariants.gray | ColorVariants.white; leftIcon?: string; rightIcon?: string; clickEvent?: () => void; options?: DhlSelectionOptionType[]; optionClickEvent?: (o: DhlSelectionOptionType) => void; }	undefined
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
hasInnerValidationIcon	has-inner-validation-icon	An optional flag to render a validation icon inside the input group. Requires *validation.type key to be passed. When prop is set to true, validation icon is *displayed inside the fieldset. Can be used together with validation message or *independently.	boolean	false
isDisabled	is-disabled	An optional flag to define if the component is disabled.	boolean	false
layout	layout	An optional prop to control input sizing layout.	"equally" | "shifted"	DHL_INPUT_GROUP_LAYOUT.EQUALLY
rightIcon	right-icon	An optional Url of the icon to the display to the right instead of Chevron`.	string	undefined
rightIconClickEvent	right-icon-click-event	An optional right icon click callback handler.	(e: Event) => void	undefined
validation	validation	An optional object to set-up a custom components validation state.	{ type: Variants.warning | 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-input-addon
• dhl-validation-feedback
• dhl-icon-wrapper
• dhl-icon

Graph

---

Built by DHL User Interface Library Team!