Counter

The Counter component is an interactive form component used to gather user input that can be directly incremented or decremented. The user can also choose to enter a value manually.

Import

React

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

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

Angular

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

<dhl-counter></dhl-counter>

Vue.js

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

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

The Counter features an additional prop that enables quick and easy validation stylings.

Code

React

<DhlCounter></DhlCounter>

Angular

<dhl-counter></dhl-counter>

Vue.js

<dhl-counter></dhl-counter>

Interactive Demo

Migrating from DUIL 1.0

• Rename onChange to changeEvent
• Rename onBlur to blurEvent
• Rename disabled to isDisabled
• Default inputmode is decimal
• Add formnovalidate
• Add min and max for setting Counter numerical limits
• Remove isBlock

Readme

Usage

Dhl-counter

Snippets of code in HTML and JavaScript to show some of the use cases for the component. The code is not meant to be executed, but to be used as a reference for the usage of the component.
Angular, React and Vue usages are not included in this documentation, but can be easily derived from the html and javascript code.

default usage

<form novalidate>
  <dhl-counter
    value="10"
    min="4"
    max="16"
    step="2"
    name="counter-1"
  ></dhl-counter>

  <dhl-button
    type="reset"
    variant="outline"
    >reset</dhl-button
  >
  <dhl-button type="submit">submit</dhl-button>
</form>
<dhl-text is-paragraph>Min: <span id="min"></span></dhl-text>
<dhl-text is-paragraph>Max: <span id="max"></span></dhl-text>
<dhl-text is-paragraph>Step: <span id="step"></span></dhl-text>
<dhl-text is-paragraph>Value: <span id="value"></span></dhl-text>

<script type="module">
  const form = document.querySelector("form");
  const component = document.querySelector("dhl-counter");

  const min = document.querySelector("#min");
  const max = document.querySelector("#max");
  const step = document.querySelector("#step");
  const value = document.querySelector("#value");

  min.innerHTML = component.getAttribute("min");
  max.innerHTML = component.getAttribute("max");
  step.innerHTML = component.getAttribute("step");
  value.innerHTML = component.getAttribute("value");

  component.addEventListener("dhlCounterChange", (e) => {
    value.innerHTML = e.detail.value;
  });

  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    console.log(Object.fromEntries(new FormData(form)));
    return await form.checkValidity();
  });
</script>

Properties

Property	Attribute	Description	Type	Default
blurEvent	--	[DEPRECATED] An optional onBlur callback handler. blurEvent is deprecated and will be removed in a future release. Please prefer the dhlCounterBlur event instead. dhlCounterBlur is a custom event emitted when the components input is blurred.	(event: FocusEvent) => void	undefined
buttonClickHandler	--	[DEPRECATED] An optional buttonClickHandler callback handler buttonClickHandler is deprecated and will be removed in a future release. Please prefer the dhlCounterButtonClick event instead. dhlCounterButtonClick is a custom event emitted when the components input is blurred.	(arg: any) => void	undefined
changeEvent	--	[DEPRECATED] An optional onChange callback handler changeEvent is deprecated and will be removed in a future release. Please prefer the dhlCounterChange event instead. dhlCounterChange is a custom event emitted when the components input is blurred.	(event: InputEvent) => void	undefined
dataAriaDescribedby	data-aria-describedby	An optional prop defining the list of reference IDs (separated by spaces), recommended when you want to an error message on your field.	string	undefined
dataAriaLabel	data-aria-label	An optional prop defining the text read by the screen reader to represent the component; use this if you need different text to be read from label.	string	undefined
dataAriaLabelMinusButton	data-aria-label-minus-button	An optional prop defining the text read by the screen reader to represent the Counter's minus button	string	undefined
dataAriaLabelPlusButton	data-aria-label-plus-button	An optional prop defining the text read by the screen reader to represent the Counter's [plus] button	string	undefined
dataAriaLabelledby	data-aria-labelledby	An optional ariaLabelledby prop that establishes the relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labelling. List multiple element IDs in a space delimited fashion.	string	undefined
dataClassName	data-class-name	An optional prop for the class of the root element.	string	undefined
dataId	id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	dhl-counter-${getRandomString()}
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
formNoValidate	form-no-validate	An optional prop used to set native formnovalidate attribute. This bypasses form control validation for form submission for the types image and submit.	boolean	undefined
inputMode	input-mode	An optional inputmode prop used by the component to indicate which kind of keyboard is shown by the device/browser. Possible values are: "none", "text", "tel", "url", "email", "numeric", "decimal", and "search".	string	"decimal"
isDisabled	disabled	An optional flag to define if the component is disabled.	boolean	undefined
max	max	An optional prop that sets the maximum number the component value can attain.	number	undefined
min	min	An optional prop that sets the minimum number the component value can attain.	number	undefined
name	name	An optional value to be set to the element HTML name attribute. It takes any valid value that can be used for the name attribute of an HTMLInputElement.	string	undefined
required	required	An optional prop to flag the component as required within a form context.	boolean	undefined
size	size	An optional size prop for the component.	"md" \| "sm"	DHL_COUNTER.SIZE.MD
step	step	An optional prop to assign a multiple by which the value is incremented by.	number	1
validation	--	An optional object to set-up a custom components validation state. Required Fields: message type	{ type: Variants.valid \| Variants.invalid \| Variants.note; message?: string; }	null
value	value	An optional prop defining the value of the component which is taken when a form is submitted.	number	0

Events

Event	Description	Type
dhlCounterBlur	Emits a custom event when the component is blurred The value of the component is sent as an object in the event detail.	CustomEvent<{ value: number; }>
dhlCounterButtonClick	Emits a custom event when the component's buttons are clicked The value of the component is sent as an object in the event detail.	CustomEvent<{ value: number; }>
dhlCounterChange	Emits a custom event when the value of the component changes. The value of the component is sent as an object in the event detail.	CustomEvent<{ value: number; }>

Methods

checkValidity() => Promise<boolean>

Checks the validity of the input field.

Returns

Type: Promise<boolean>

A promise that resolves to true if the input field is valid, otherwise false.

getInputElement() => Promise<HTMLInputElement>

Retrieves the input element asynchronously.

Returns

Type: Promise<HTMLInputElement>

A promise that resolves to the input element.

getValidationMessage() => Promise<string>

Retrieves the validation message for the input field.

Returns

Type: Promise<string>

A promise that resolves to a string representing the validation message.

reportValidity() => Promise<boolean>

Reports the validity of the input field.

Returns

Type: Promise<boolean>

A promise that resolves to a boolean indicating whether the input field is valid.

setValidity(validity: ValidityState, validationMessage?: string) => Promise<void>

Sets the validity state of the input field.

Parameters

Name	Type	Description
validity	ValidityState	- The validity state to set.
validationMessage	string	- An optional validation message to set.

Returns

Type: Promise<void>

A Promise that resolves when the validity state is set.

willValidate() => Promise<boolean>

Returns a promise that resolves to true if the element will successfully validate, or false otherwise.

Returns

Type: Promise<boolean>

A promise that resolves to a boolean value indicating whether the element will validate.

Dependencies

Depends on

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

Graph

---

Built by DHL User Interface Library Team!