Input #
The va-input component is intended to be used instead of the standard HTMl input or textarea.
Examples #
Basic usage #
By default va-input doesn’t have attributes, but can be combined with a placeholder and/or label.
Styles #
There are tree styles for input: Default (outlined), solid, bordered.
Hint messages #
Support single/multi line messages to give some hint for improve UX
Counter #
Validation and error/success state #
Support a simple validation using the rules prop. The prop accepts an array of callbacks. While validating rules, the current v-model value will be passed to the callback. This callback should return either true or a String, the error message. Also you can manually pass error/success prop to manage input state. Notice that we use immediate-validation props to show error message without requiring user interaction.
Slots #
You can use slots for pass custom elements to input (inner or outer), such as icons or buttons etc.
Mask #
Support possibility to force/help the user to input a specific format with help from mask prop. You can pass some mask presets or custom options based on cleave.js. By default returning a raw value.
If you need other cleave addons (like phone) you have install cleave.js and just import them in your app. For example, the path is: cleave.js/dist/addons/cleave-phone.{country}.js
Strict v-model bind #
In case you want to strictly bind v-model to input value. This will prevent user from typing anything that doesn't match provided model-value. Can be used for validation or making masks.
Input Class #
To assign a class directly to input, rather than its wrapper, use the input-class property. For example, you can use the build-in component class (or any other class you've created) to align the input text — va-text-center and va-text-right to align the center or right.
Customizable #
You can create preset for your input components, but sometimes requirements can be out of boundaries of pre-defined presets. To solve this problem component allows to customize it with slots and its props.
Supported HTML attributes #
Be default we support these HTML Input attributes: type, disabled, readonly, placeholder, pattern, inputmode, minlength, maxlength. Read more on the MDN.
Input types #
With a type property you can set the type of the input which will render native <input type="text/password/search/etc" />.
Watch available types here (some types aren't supported or have implemented as a Vuestic UI component).
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| ariaResetLabel | The aria-label of the "reset" button |
|
|
| autofocus |
|
| |
| background | The color name of the background color |
| - |
| clearable | Specifies whether the input should be clearable. |
|
|
| clearableIcon | Sets the cleaning button icon. |
|
|
| clearValue | Value which will be set after clear. |
|
|
| color | Color of the component (theme string or |
|
|
| counter | Specifies whether the input should have a counter at the bottom. |
|
|
| dirty | Sets the dirty state of the component |
|
|
| disabled | Applies |
|
|
| error | Show component in error state. |
| - |
| errorCount | Number of error messages displayed. |
|
|
| errorMessages | Error messages for the component. |
| - |
| immediateValidation | Sets the validation to be performed when the component is mounted |
|
|
| innerLabel | If true label will be inside the input. |
|
|
| inputAriaDescribedby |
| - | |
| inputAriaLabel |
|
| |
| inputAriaLabelledby |
| - | |
| inputClass | Class to be applied directly to the input element. |
|
|
| inputmode | The inputmode global attribute is an enumerated attribute that specifies what kind of input mechanism would be most helpful for users entering content into the form control. |
|
|
| label | Same as native |
|
|
| loading | Indicates that something is loading (spinner icon). |
|
|
| mask | Mask for input. You can pass some mask presets or custom options based on cleave.js. |
|
|
| maxLength | Maximum length of input. |
| - |
| messages | Description messages for the component. |
|
|
| modelValue | The value of the |
|
|
| name | Applies |
| - |
| pattern | Pattern for input in case you want to use native validation. |
| - |
| placeholder | Placeholder text. |
|
|
| preset | Named preset combination of component props. |
| - |
| readonly | Doesn't look disabled, but acts like one. Mostly useful for wrapper components. |
|
|
| requiredMark | Adds required mark to the label |
|
|
| returnRaw | If true, the raw value will be returned instead of the formatted one. |
|
|
| rules | Validation rules . |
|
|
| stateful | Add possibility to work with component without setting |
|
|
| strictBindInputValue | In case you want to strictly bind v-model to input value. This will prevent user from typing anything that doesn't match your custom the mask. |
|
|
| success | Show component in success state. |
|
|
| tabindex | Sets the custom |
|
|
| type | Will be used as value for html |
|
|
Events #
| Name | Description |
|---|---|
blur | On blur.. The event argument is: |
change | . The event argument is: |
clear | Emitted when the clear button is clicked. |
click | On click.. The event argument is: |
clickAppend | The event is triggered by clicking on the |
clickAppendInner | The event is triggered by clicking on the |
clickIcon | . The event argument is: |
clickPrepend | The event is triggered by clicking on the |
clickPrependInner | The event is triggered by clicking on the |
focus | On focus.. The event argument is: |
input | On value change. |
keydown | . The event argument is: |
keypress | |
keyup | . The event argument is: |
update:dirty | Fires when the dirty state changes |
update:error | Fires when the error state changes |
update:errorMessages | Fires when the error messages change |
update:modelValue | The event is triggered when the component needs to change the model. Is also used by |
updateError | Fires when the error state changes. The event argument is: |
updateErrorMessages | Fires when the error messages change. The event argument is: |
Slots #
| Name | Description |
|---|---|
append | Slot for append content. It will be placed after input component. |
appendInner | Slot for append content. It will be placed inside input. |
prepend | Slot for prepend content. It will be placed before input component. |
prependInner | Slot for prepend content. It will be placed inside input. |
Methods #
| Name | Description |
|---|---|
blur | Removes focus from input. |
focus | Sets focus on input. |
reset | Resets input value. |
Css Variables #
| Name | Default Value |
|---|---|
| --va-input-line-height | 20px |
| --va-input-font-size | 1rem |
| --va-input-font-weight | normal |
| --va-input-font-style | normal |
| --va-input-font-stretch | normal |
| --va-input-letter-spacing | normal |
| --va-input-disabled-opacity | 0.4 |
VaInputWrapper:
:root,
:host {
--va-input-wrapper-width: var(--va-form-element-default-width);
--va-input-wrapper-color: var(--va-primary);
--va-input-wrapper-background: var(--va-background-element, #f5f9fb);
--va-input-wrapper-background-opacity: 1;
--va-input-wrapper-border-width: var(--va-form-element-border-width);
--va-input-wrapper-border-color: var(--va-background-border);
--va-input-wrapper-border-radius: var(--va-form-element-border-radius);
--va-input-wrapper-min-width: var(--va-form-element-min-width);
--va-input-wrapper-display: inline-block;
--va-input-wrapper-cursor: text;
--va-input-wrapper-min-height: 36px;
--va-input-wrapper-validation-background-opacity: 0.1;
/* Counter container */
--va-input-wrapper-counter-line-height: 1.5;
--va-input-wrapper-counter-font-size: 0.8rem;
--va-input-wrapper-counter-color: var(--va-secondary);
/* Content Wrapper */
--va-input-wrapper-horizontal-padding: 0.5rem;
--va-input-wrapper-items-gap: 0.5rem;
/* Validation */
--va-input-wrapper-success-background: var(--va-input-success-color);
--va-input-wrapper-error-background: var(--va-input-error-color);
}