VTextField

Base class for text-field

Props

Name	Type	Description
appearance	Enum: fieldset ghost
aria-current	Enum: page step location date time true false	Indicates the element that represents the current item within a container or set of related elements.
auto-complete	string
autofocus	boolean	Indicates 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-count	boolean	Whether to show the character count.
disabled	boolean	Sets the element's disabled state. A disabled element will not be included during form submission.
error-text	string	The error text for the form element.
helper-text	string	The helper text for the form element.
icon	Enum: 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 ... 1227 more ...	A decorative icon the custom element should have. See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
initial-value	string	The initial value of the form. This value sets the value property only when the value property has not been explicitly set.
inputmode	string	Hints 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.
label	string	The label for the form element.
list	string	Allows associating a https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
maxlength	number	The maximum number of characters a user can enter.
minlength	number	The minimum number of characters a user can enter.
name	string	The name of the element. This element's value will be surfaced during form submission under the provided name.
pattern	string	A regular expression that the value must match to pass validation.
placeholder	string	Sets the placeholder value of the element, generally used to provide a hint to the user.
readonly	boolean	When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly
required	boolean	Require the field to be completed prior to form submission.
scale	Enum: condensed normal	The size the text-field should have.
shape	Enum: rounded pill
size	number	Sets the width of the element to a specified number of characters.
spellcheck	boolean	Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
success-text	string	The success text for the form element.
type	Enum: email password tel text url	Allows setting a type or mode of text.
value	string	The current value of the element. This property serves as a mechanism to set the value property through both property assignment and the .setAttribute() method. This is useful for setting the field's value in UI libraries that bind data through the .setAttribute() API and don't support IDL attribute binding.

Events

Name	Event Type	Description
blur	FocusEvent	Fires when the element loses focus.
change	CustomEvent<undefined>	Fires a custom 'change' event when the value has changed
click	MouseEvent	Fires 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.
focus	FocusEvent	Fires when the element receives focus.
input	Event	Fires when the value of an element has been changed.
keydown	KeyboardEvent	Fires when a key is pressed.
keyup	KeyboardEvent	Fires when a key is released.

Slots

Name	Description
action-items	Used to add action items to the end of the text-field.
helper-text	Describes how to use the text-field. Alternative to the helper-text attribute.
leading-action-items	Used to add action items to the start of the text-field.

Methods

Name	Type	Description
focus	() => unknown
select	() => unknown	Selects all the text in the text field
validate	() => unknown	{@inheritDoc (FormAssociated:interface).validate}