Skip to content

VTextField

Base class for text-field

Props

NameTypeDescription
appearanceEnum:
fieldset
ghost
auto-completestring
autofocusbooleanIndicates that this element should get focus after the page finishes loading. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus
char-countbooleanUse in combination with maxlength to display a character count.
disabledbooleanSets the element's disabled state. A disabled element will not be included during form submission.
error-textstringProvides a custom error message. Any current error state will be overridden.
helper-textstringProvides additional information to help the user enter the correct information. To add HTML to the helper text, use the helper-text slot instead.
iconEnum:
10-sec-backward-line
10-sec-backward-solid
10-sec-forward-line
10-sec-forward-solid
30-sec-backward-line
30-sec-backward-solid
30-sec-forward-line
30-sec-forward-solid
5-sec-backward-line
5-sec-backward-solid
5-sec-forward-line
5-sec-forward-solid
... 1229 more ...
A decorative icon the custom element should have. See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
initial-valuestringThe default value of the element. This value sets the value property only when the value property has not been explicitly set.
inputmodestringHints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.
labelstringThe label for the form element.
liststringAllows associating a https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
maxlengthnumberThe maximum number of characters a user can enter.
minlengthnumberThe minimum number of characters a user can enter.
namestringThe name of the element. This element's value will be surfaced during form submission under the provided name.
patternstringA regular expression that the value must match to pass validation.
placeholderstringSets the placeholder value of the element, generally used to provide a hint to the user.
readonlybooleanWhen true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly
requiredbooleanRequire the field to be completed prior to form submission.
scaleEnum:
condensed
normal
The size the text-field should have.
shapeEnum:
rounded
pill
sizenumberSets the width of the element to a specified number of characters.
spellcheckbooleanControls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
success-textstringProvides a custom success message. Any current error state will be overridden.
typeEnum:
email
password
tel
text
url
Allows setting a type or mode of text.
valuestringThe current value of the element.

Events

NameEvent TypeDescription
blurFocusEventFires when the element loses focus.
changeCustomEvent<undefined>Fires a custom 'change' event when the value has changed
clickMouseEventFires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
focusFocusEventFires when the element receives focus.
inputEventFires when the value of an element has been changed.
keydownKeyboardEventFires when a key is pressed.
keyupKeyboardEventFires when a key is released.

Slots

NameDescription
action-itemsUsed to add action items to the end of the text-field.
helper-textDescribes how to use the text-field. Alternative to the helper-text attribute.
leading-action-itemsUsed to add action items to the start of the text-field.

Methods

NameTypeDescription
checkValidity() => booleanReturn the current validity of the element.
focus() => unknown
reportValidity() => booleanReturn the current validity of the element. If false, fires an invalid event at the element.
select() => unknownSelects all the text in the text field
validate() => unknown{@inheritDoc (FormAssociated:interface).validate}