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-line10-sec-backward-solid10-sec-forward-line10-sec-forward-solid30-sec-backward-line30-sec-backward-solid30-sec-forward-line30-sec-forward-solid5-sec-backward-line5-sec-backward-solid5-sec-forward-line5-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:pagesteplocationdatetimetruefalse | 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:emailpasswordteltexturl | 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:fieldsetghost | |
| shape | Enum:roundedpill | |
| autoComplete | string | |
| scale | Enum:condensednormal | The size the text-field should have. |
| 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. |
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 |