VTextField

Base class for text-field

Props

Name	Type	Description
success-text	`string`	The success text for the form element.
helper-text	`string`	The helper text for the form element.
char-count	`boolean`	Whether to show the character count.
label	`string`	The label for the form element.
error-text	`string`	The error 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` ... 1208 more ...	A decorative icon the custom element should have. See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
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.
disabled	`boolean`	Sets the element's disabled state. A disabled element will not be included during form submission.
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.
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.
name	`string`	The name of the element. This element's value will be surfaced during form submission under the provided name.
required	`boolean`	Require the field to be completed prior to form submission.
readonly	`boolean`	When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly
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
placeholder	`string`	Sets the placeholder value of the element, generally used to provide a hint to the user.
type	Enum: `email` `password` `tel` `text` `url`	Allows setting a type or mode of text.
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.
pattern	`string`	A regular expression that the value must match to pass validation.
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.
appearance	Enum: `fieldset` `ghost`
shape	Enum: `rounded` `pill`
autoComplete	`string`

Events

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

Slots

Name	Description
leading-action-items	Used to add action items to the start of the text-field.
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.

Methods

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

VTextField ​

Props ​

Events ​

Slots ​

Methods ​

VTextField

Props

Events

Slots

Methods