Input

<gstock-input> | GstockInput

API

Propiedades

Nombre Descripción Reflects Tipo Por defecto
defaultValue The default value of the form control. Primarily used for resetting the form control. string ''
autocapitalize Controls whether and how text input is automatically capitalized as it is entered by the user. 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters' -
autocomplete Specifies what permission the browser has to provide assistance in filling out form field values. Refer to this page on MDN for available values. string -
autocorrect Indicates whether the browser’s autocorrect feature is on or off. 'off' | 'on' -
autofocus Indicates that the input should receive focus on page load. boolean -
clearable Adds a clear button when the input is not empty. boolean false
disabled Disables the input. Reflects boolean false
enterKeyHint
enterkeyhint 		Used to customize the label or icon of the Enter key on virtual keyboards. 'enter' | '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. Reflects string ''
helpText
help-text 		The input’s help text. If you need to display HTML, use the help-text slot instead. string ''
iconPrefix
prefix 		The prefix icon name. string | undefined -
iconSuffix
suffix 		The suffix icon name. string | undefined -
inputMode
inputmode 		Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual keyboard on supportive devices. 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' -
label The input’s label. If you need to display HTML, use the label slot instead. string ''
max The input’s maximum value. Only applies to date and number input types. number -
maxlength The maximum length of input that will be considered valid. number -
min The input’s minimum value. Only applies to date and number input types. number -
minlength The minimum length of input that will be considered valid. number -
name The name of the input, submitted as a name/value pair with form data. string ''
noSpinButtons
no-spin-buttons 		Hides the browser’s built-in increment/decrement spin buttons for number inputs. boolean false
passwordToggle
password-toggle 		Adds a button to toggle the password’s visibility. Only applies to password types. boolean false
passwordVisible
password-visible 		Determines whether or not the password is currently visible. Only applies to password input types. boolean false
pattern A regular expression pattern to validate input against. string -
placeholder Placeholder text to show as a hint when the input is empty. string ''
readonly Makes the input readonly. Reflects boolean false
required Makes the input a required field. Reflects boolean false
size The size of the input. Reflects '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. Only applies to date and number input types. number | 'any' -
title Global attribute contains text representing advisory information related to the element it belongs to. string ''
type The type of input. Works the same as a native <input> element, but only a subset of types are supported. Reflects 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' 'text'
validityStyles
validity-styles 		Specify whether validation styles are applied. false -
value The current value of the input, submitted as a name/value pair with form data. string ''
valueAsDate Sets the current value as a Date object. This will use the native <input type="{{type}}"> implementation and may result in an error. - -
valueAsNumber Sets the current value as a number. - -
validity Gets the validity state object - -
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. -

Aprende más sobre eventos .

Slots

Nombre Descripción
label The input’s label.
help-text The input’s help text.
prefix The input’s prefix.
suffix The input’s suffix.
clear-icon The input’s clear icon.

Aprende más sobre slots .

Métodos

Nombre Descripción
focus(
options: FocusOptions
) 		Sets focus on the input.
blur( ) Removes focus from the input.
select( ) Selects all the text in the input.
setSelectionRange(
selectionStart: number ,
selectionEnd: number ,
selectionDirection: 'forward' | 'backward' | 'none'
) 		Sets the start and end positions of the text selection (0-based).
setRangeText(
replacement: string ,
start: number ,
end: number ,
selectMode: 'select' | 'start' | 'end' | 'preserve'
) 		Replaces a range of text with a new string.
showPicker( ) Displays the browser picker for an input element (only works if the browser supports it for the input type).
stepUp( ) Increments the value of a numeric input type by the value of the step attribute.
stepDown( ) Decrements the value of a numeric input type by the value of the step attribute.
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.

Aprende más sobre métodos .

Partes

Nombre Descripción
base The component’s base wrapper.
prefix The input’s prefix.
input The component’s input.
suffix The input’s suffix.
clear-button The component’s clear button.
form-control The component’s form control.
form-control-label The component’s form control label.
form-control-input The component’s form control input.
form-control-help-text The component’s form control help text.

Aprende más sobre partes CSS .

Dependencias

Este componente importa automáticamente las siguientes dependencias.