InputGroup

danger

This component is deprecated and will be removed in an upcoming version of the component library.

Please avoid using this component in new implementations.

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:

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

Vue.js

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

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

Code

React

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

Angular

<duil320-dhl-input-group>
  <duil320-dhl-input-field
    (dhlChange)="changeEvent($event)"
    [variant]="variant"
  ></duil320-dhl-input-field>
  <duil320-dhl-input-field
    (dhlChange)="changeEvent($event)"
    [variant]="variant"
  ></duil320-dhl-input-field>
</duil320-dhl-input-group>

Vue.js

<duil320-dhl-input-group>
  <duil320-dhl-input-field
    @dhl-change="() => {}"
    :variant.prop="{
      label: 'Label',
      placeholder: 'Placeholder',
      type: 'static'
    }"
  ></duil320-dhl-input-field>
  <duil320-dhl-input-field
    @dhl-change="() => {}"
    :variant.prop="{
      label: 'Label',
      placeholder: 'Placeholder',
      type: 'static'
    }"
  ></duil320-dhl-input-field>
</duil320-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?: "gray" | "white"; leftIcon?: string; rightIcon?: string; clickEvent?: () => void; options?: DhlSelectionOptionType[]; optionClickEvent?: (o: DhlSelectionOptionType) => void; value?: string; }	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	`duil320-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
isRightIconClickable	is-right-icon-clickable	An optional flag to make the right icon clickable and keyboard-accessible. When false, the icon is rendered as decoration only.	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
validation	validation	An optional object to set-up a custom components validation state.	{ type: "warning" | "valid" | "invalid" | "note"; message?: string; }	undefined

Events

Event	Description	Type
dhlRightIconClick	Event emitted when the right icon is clicked.	CustomEvent<KeyboardEvent | MouseEvent>

Slots

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

Dependencies

Used by

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

Depends on

• duil320-dhl-input-addon
• duil320-dhl-validation-feedback
• duil320-dhl-icon-wrapper
• duil320-dhl-icon

Graph

---

Built by DHL User Interface Library Team!