Quantity Input

<gstock-quantity-input> | GstockQuantityInput

API

Propiedades

Nombre	Descripción	Tipo	Por defecto
`defaultValue`	The default value of the form control. Primarily used for resetting the form control.	`string`	`''`
`allowNegative` `allow-negative`	Indicates when the value can be negative.	`boolean`	`false`
`autocorrect`	Indicates whether the browser’s autocorrect feature is on or off.	`'off' \| 'on' \| undefined`	`-`
`autofocus`	Indicates that the input should receive focus on page load.	`boolean`	`-`
`decimals`	Number of decimals to display when formatting input value.	`number`	`-`
`disabled`	Disables the input.	`boolean`	`false`
`enterKeyHint` `enterkeyhint`	Used to customize the label or icon of the Enter key on virtual keyboards.	`'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'`	`-`
`form`	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.	`string`	`''`
`helpText` `help-text`	The input’s help text. If you need to display HTML, use the `help-text` slot instead.	`string`	`''`
`label`	The input’s label. If you need to display HTML, use the `label` slot instead.	`string`	`''`
`max`	The quantity input’s maximum value. Only applies to date and number input types.	`number`	`-`
`min`	The quantity input’s minimum value. Only applies to date and number input types.	`number`	`-`
`name`	The name of the input, submitted as a name/value pair with form data.	`string`	`''`
`numberFormat` `number-format`	Number format to use when parsing and formatting number.	`'#,###.##' \| '#.###,##' \| '# ###.##' \| '# ###,##'`	`'#,###.##'`
`placeholder`	Placeholder text to show as a hint when the input is empty.	`string`	`''`
`readonly`	Makes the input readonly.	`boolean`	`false`
`required`	Makes the input a required field.	`boolean`	`false`
`size`	The input’s size.	`'small' \| 'medium' \| 'large'`	`'medium'`
`spellcheck`	Enables spell checking on the input.	`boolean`	`true`
`step`	Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is implied, allowing any numeric value.	`number \| 'any'`	`-`
`validityStyles` `validity-styles`	Specify whether validation styles are applied.	`boolean`	`false`
`value`	The current value of the input, submitted as a name/value pair with form data.	`string`	`''`
`validity`	Gets the validity state object	`ValidityState`	`-`
`validationMessage`	Gets the validation message	`-`	`-`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Aprende más sobre atributos y propiedades .

Eventos

Nombre	React Event	Descripción	Event Detail
`gstock-blur-event`	`onGstockBlurEvent`	Emitted when the control loses focus.	-
`gstock-change-event`	`onGstockChangeEvent`	Emitted when an alteration to the control’s value is committed by the user.	-
`gstock-clear-event`	`onGstockClearEvent`	Emitted when the clear button is activated.	-
`gstock-focus-event`	`onGstockFocusEvent`	Emitted when the control gains focus.	-
`gstock-input-event`	`onGstockInputEvent`	Emitted when the control receives input.	-
`gstock-invalid-event`	`onGstockInvalidEvent`	Emitted when the form control has been checked for validity and its constraints aren’t satisfied.	-
`gstock-increase-event`	`onGstockIncreaseEvent`	Emitted when the the minus button is clicked.	-
`gstock-decrease-event`	`onGstockDecreaseEvent`	Emitted when the plus button is clicked.	-

Aprende más sobre eventos .

Slots

Nombre	Descripción
`label`	The input’s label.
`help-text`	The input’s help text.

Aprende más sobre slots .

Métodos

Nombre	Descripción
`focus( options: FocusOptions )`	Sets focus on the control.
`blur( )`	Removes focus from the control.
`checkValidity( )`	Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
`getForm( )`	Gets the associated form, if one exists.
`reportValidity( )`	Checks for validity and shows the browser’s validation message if the control is invalid.
`setCustomValidity( message: string )`	Sets a custom validation message. Pass an empty string to restore validity.

Aprende más sobre métodos .

Partes

Nombre	Descripción
`base`	Input’s wrapper.
`display-input`	Component’s display input.
`control-input`	Component’s management input.
`form-control`	Component’s form control.
`form-control-label`	Component’s form control label.
`form-control-input`	Component’s form control input.
`form-control-help-text`	Component’s form control help text.

Aprende más sobre partes CSS .

Dependencias

Este componente importa automáticamente las siguientes dependencias.

<gstock-icon>