Groupnumber is a plugin that manages quantity increments on input number.


You can customize the default styles of this component inside tailwind.config.js setting theme.extend.xtendui.groupnumber see css customization. Check xtendui/src/groupnumber.css.js for default styles.


Import the javascript file with import 'xtendui/src/groupnumber'.

Initialize automatically within markup with [data-xt-groupnumber="{ <options> }"].

Initialize manually within javascript with new Xt.Groupnumber(document.querySelector('.my-container'), {/* options */}).


The component uses the standard input[type="number"] attributes and behaves like browser input number validation:

  • input[min] for minimum value.

  • input[max] for maximum value.

  • input[step] for step increment and decrement.

On the steps buttons use [data-xt-step="value"] to set the amount to add (+1) or remove (-1) on click, if you set input[step="value"] the increment and decrement steps are from [step] but the sign of step is from [data-xt-step].

This demos use group see documentation for more info.


Here are the main javascript options.

SyntaxDefault / ArgumentsDescription
Optiondebug:BooleanfalseDebug on console
Optionlimit:BooleantrueLimit value with min and max attribute
Optionvalidate({ val, step }):Function|false<Function>Validate value on input change
Optionvoidable:BooleantrueInput can be resetted to empty value if initialized with no initial [value]
Optionmin:Number1Default value for minimum limit
Optionmax:NumberInfinityDefault value for maximum limit
Optioninputs:Query'input[type="number"]'Inputs query
Optionsteps:Query'[data-xt-step]'Steps query
Optionevents.input:String|false'change'List of space separated events on input to listen
Optionevents.steps:String|false'click'List of space separated events on steps to listen

Default functions as follow.

validate: ({ val, step }) => {
  if (step && val % step) {
    return Math.ceil(val / step) * step
  return val

Match Media

You can add additional options that gets added on match media query. You can use different queries with different and nested options.

SyntaxDefault / ArgumentsDescription
Optionmatches:ObjectfalseAdd additional options on match media query


This components follows A11y standards so aria attributes and keyboard interactions are managed automatically.

SyntaxDefault / ArgumentsDescription
Optiona11y:Object|false<Object>Aria options
Optiona11y.controls:BooleantrueInject aria-controls attributes

Do not rely/use aria attributes, they are generated and they can change anytime.


You can get self object from DOM node on Xtend UI components with Xt.get.

let self = Xt.get({ name: 'xt-groupnumber', el: document.querySelector('.my-container') })

You can set default options for all components of the same type, with Xt.options.

Xt.options['xt-groupnumber'] = {
  debug: true,


Listen to events, for listeners use this guideline.

SyntaxDOM ElementDescription
EventinputinputValue of input changed
EventchangeinputValue of input changed
Eventinit.xt.groupnumbercontainerInit or reinit event
Eventstatus.xt.groupnumbercontainerStatus event (enabled or disabled)
Eventdestroy.xt.groupnumbercontainerDestroy event


Access properties by getting self object.

let self = Xt.get({ name: 'xt-groupnumber', el: document.querySelector('.my-container') })
const container = self.container
PropertycomponentName:StringComponent name (used in Xt.get)
Propertyoptions:ObjectFinal options
Propertyinitial:BooleanIf initial or reset activation
Propertydisabled:BooleanIf component disabled
Propertycontainer:NodeContainer node
Propertyinputs:NodesInputs nodes
Propertysteps:NodesSteps nodes


Call methods by getting self object.

let self = Xt.get({ name: 'xt-groupnumber', el: document.querySelector('.my-container') })
self = null
Methodself.reinit()Reinit component
Methodself.disable()Disable component
Methodself.enable()Enable component
Methodself.destroy()Destroy component