TTextElement ​

<TTextElement :addons="{ before: { template: `<app-icon :icon="['fas', 'pen']" />` } }" ... />
<TTextElement :addons="{ after: '...' }" ... />

Adds an addon before or after the input field. Can be defined in an object with before and after keys. The value can either be a string or a Vue component object with a render function.

Note: Can also be defined via #addon-before & #addon-after slots.

<TTextElement autocomplete="off" ... />

Sets the autocomplete attribute of the input field.

Hint: the value 'off' might not disable autocomplete - read more about it here. Alternatively you can also set inputType to 'search'.

<TTextElement input-type="password" ... />
<TTextElement input-type="date" ... />
<TTextElement input-type="number" ... />

Sets the type attribute of the input field.

<TTextElement :loading="true" ... />

Manually triggers the loading state and displays a spinner on the right.

<TTextElement name="element" ... />

Sets the element's name and the name attribute of the input field.

<TTextElement id="field-id" ... />

Sets the id attribute of the input field.

<TTextElement :readonly="true" ... />
<TTextElement :readonly="prop" ... /> <!-- computed / data (ref) prop -->
<TTextElement :readonly="[['text', 'value']]" ... /> <!-- conditional -->
<TTextElement :readonly="(el$, form$) => { return /* boolean */ }" ... />

Sets the readonly attribute of the input field.

If can be a boolean value.

It can be a computed / data (ref) prop.

It can be an array of conditions. When all conditions are met the element will become readonly.

It can be a function that receives the el$ element instance and form$ form instance params and expected to return a boolean.

<TTextElement :disabled="true" ... />
<TTextElement :disabled="prop" ... /> <!-- computed / data (ref) prop -->
<TTextElement :disabled="[['text', 'value']]" ... /> <!-- conditional -->
<TTextElement :disabled="(el$, form$) => { return /* boolean */ }" ... />

Disables the input field.

If can be a boolean value.

It can be a computed / data (ref) prop.

It can be an array of conditions. When all conditions are met the element will become disabled.

It can be a function that receives the el$ element instance and form$ form instance params and expected to return a boolean.

<TTextElement :attrs="{ autofocus: true }" ... />

Assigns HTML attributes to the container / input field.

Sets a label for the element. Can be defined as a string, a Vue component object with a render function or as a function that receives el$ as its first a param.

Can also be defined via #label slot.

<TTextElement placeholder="Placeholder" ... />

Sets the placeholder attribute of the input field.

The value of placeholder is automatically set as floating if that's not defined. This behavior can be disabled on form level with floatPlaceholders: false or globally in vueform.config.js.

<TTextElement floating="TText" ... />

Renders a floating label above the input field if that has value.

If floatPlaceholders is enabled it can be disabled for this element by using :floating="false".

<TTextElement label="Info" info="Info" ... />

Renders an ElementInfo component next to the element's label. By default the icon shows the value of info when hovered, which can contain plain text or HTML. The element needs to have a label defined in order for info to be rendered.

Can be also defined via #info slot.

<TTextElement label="Top" info="Top" info-position="top" ... />
<TTextElement label="Right" info="Right" info-position="right" ... />
<TTextElement label="Left" info="Left" info-position="left" ... />
<TTextElement label="Bottom" info="Bottom" info-position="bottom" ... />

Sets the position of the info tooltip.

Can be also defined via #info slot.

<TTextElement description="Lorem ipsum dolor sit amet" ... />

Renders the contents of description prop in the ElementDescription component below the input field. It can contain plain text or HTML.

Can be also defined via #description slot.

<TTextElement before="Before" ... />

Renders the contents of before in a ElementText component before the input field. It can contain plain text or HTML.

Can be also defined via #before slot.

<TTextElement description="Description" between="Between" ... />

Renders the contents of between in a ElementText component between the input field and the description. It can contain plain text or HTML.

Can be also defined via #between slot.

<TTextElement description="Description" rules="required" after="After" ... />

Renders the contents of after in a ElementText component after the description and error. It can contain plain text or HTML.

Can be also defined via #after slot.

<TTextElement default="Default" ... />
<TTextElement :default="{ en: 'Default', zh: '默認' }" ... />

Sets the default value for the input field in both languages. It can set different default values for different languages if provided as an object, where keys should be equal to language keys.

<TTextElement :format-data="(n, v) => ({[n]: /* transformed value */ })" ... />

Formats the element's requestData.

The first param is the element's name, the second is the value. The return value should be an object, which contains one item with the element's name as key and an object containing the transformed value for each language key (eg. en) as value.

<TTextElement :format-load="(v) => /* transformed value */" ... />

Formats the data being loaded to the element when using load(data, format: true). It receives the value being loaded to the element as its first param and should return the formatted value as an object containing a value for each language key (eg. en).

<TTextElement :submit="false" ... />

If set to false the element's data will not be included in requestData and will not be submitted.

<TTextElement rules="required|min:10" ... />
<TTextElement :rules="['required', 'min:10']" ... />
<TTextElement :rules="{
  en: ['required', 'min:10'],
  zh: 'min:10',
}" ... />

The validation rules to be applied for the element.

The list of rules can be defined as a string separated by | or as an array, where each item should be a single validation rule.

Can be defined for each language separately when using an object with language keys:

{
  en: ['required', 'min:10'],
  zh: 'min:10',
}

<TTextElement field-name="Field name" rules="required" ... />

Sets the name of the field in validation rule messages.

<TTextElement floating="Without debounce" rules="required" ... />
<TTextElement floating="With debounce" :debounce="500" rules="required" ... />

The milliseconds to wait before the validation triggers after the user changed the value (unless the value is empty). Applies to each validation rule.

If you only want debounce for a specific rule, you can use: rules="required|email:debounce=500"

<TTextElement rules="required" :messages="{ required: 'Please fill in' }" ... />

Overrides the default messages for the element's validation rules. The value is an object where each key is the name of a validation rule and the value is the error message that will be displayed when the rule fails.

You can override validation messages on form level with messages.

<TTextElement :display-errors="false" ... />

Whether element errors should be displayed.

<TTextElement :conditions="[
  ['foo', 'bar'],
  'AGE(birthday) > 18',
  (form$) => !!form$?.el$('terms').value
]" ... />

Shows or hides an element based on the provided conditions.

<TTextElement label="Label" :columns="{ container: 12, label: 3, wrapper: 12 }" ... />

Sets the size of the container, label and wrapper using the theme's grid system, where the:

• container is the outermost DOM that contains both label and wrapper
• label contains the label
• wrapper contains the input field.

The value of container defines the size of the element's container. 12 will result in full width, 6 in half, 4 in third and so on.

The value of label defines the amount of space the label should take up within the container. If the container is 12 and label is 6 the label is going to take up half the space and the input field will the other half (which is calculated automatically). If the container is 6 and label is 6, the label will only take up one forth and the input field the rest. In case the label has full width (12) the input field will also take up full space instead of becoming zero.

The value of wrapper defines the size of the input field wrapper within the space left for it in the container after subtracting the size of the label. If the container is 12 and label is 4 the space left for the input field is 8. In this case if the wrapper value is 12 it will take up the full space left for it (which is 8) while if it is changed to 6 it will only take up half the space left for it (4):

<TTextElement label="Label" :columns="{ container: 12, label: 4, wrapper: 12 }" ... />
<TTextElement label="Label" :columns="{ container: 12, label: 4, wrapper: 6 }" ... />

Note that while the size of the input field wrapper changes, the size of extras like a description or error won't be limited to the wrapper's space. Instead it will take up the full space in the container left after subtracting the size of the label:

<TTextElement
  label="Label"
  :columns="{ container: 12, label: 4, wrapper: 6 }" 
  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
... />

You can set the value of columns as a number in which case the container will receive its value without affecting the default settings of label and wrapper:

<TTextElement label="Label" :columns="6" ... /> <!-- { container: 6, label: 3, wrapper: 12 } -->

You can as well define column values for different breakpoints using the theme system's breakpoints like sm, md, etc. as keys:

<TTextElement label="Label" :columns="{
  xs: { container: 12, label: 12, wrapper: 12 },
  sm: { container: 12, label: 4, wrapper: 12 },
  md: 12,
  lg: { container: 12, label: 2, wrapper: 12 }
}" ... />

Default column sizes can be defined globally in vueform.config.js or on form level using columns.

<TTextElement :inline="true" ... />

Renders the element and all of its components in a single <span> without applying columns.

<TTextElement size="sm" ... />
<TTextElement ... /> <!-- Default size: 'md' -->
<TTextElement size="lg" ... />

The size of the element and its child components.

<TTextElement view="alt" ... />

The name of the view to be used for the element and by default for its child components. If undefined the default view will be used. Child component views can be overridden with views option.

Learn more about views here.

<TTextElement :views="{
  ComponentName: 'alt'
}" ... />

The name of the views for the child components.

Learn more about views here.

<TTextElement :add-classes="{
  ComponentName: {
    classname: 'class-value',
    classname: ['class-value'],
    classname: [{'class-value': true}],
  }
}" ... />

Adds classes to any component's class names. The classes can have string or array values. When Vue style classes are used object values must be wrapped in an array.

Conditional classes can be passed as a function with form$ param, eg.:

<TTextElement :add-classes="(form$) => ({
  ComponentName: {
    classname: [
      { 'class-value': form$.el$('other_field')?.value === 'some_value' }
    ],
  }
})" ... />

Learn more about adding classes here.

<TTextElement :add-class="{
  classname: 'class-value',
  classname: ['class-value'],
  classname: [{'class-value': true}],
}" ... />

Adds classes to any of TTextElement component's class names. Classes can have string or array values. When Vue style classes are used object values must be wrapped in an array.

Conditional classes can be passed as a function with form$ param, eg.:

<TTextElement :add-class="(form$) => ({
  classname: [
    { 'class-value': form$.el$('other_field')?.value === 'some_value' }
  ],
})" ... />

Learn more about adding classes here.

<TTextElement :remove-classes="{
  ComponentName: {
    classname: ['class-value-1', 'class-value-2']
  }
}" ... />

Removes classes from any class names of any components. The classes to be removed must be listed in an array.

Conditional classes can be passed as a function with form$ param, eg.:

<TTextElement :remove-classes="(form$) => ({
  ComponentName: {
    classname: form$.el$('other_field')?.value === 'some_value'
      ? ['class-value-1', 'class-value-2']
      : [],
  }
})" ... />

Learn more about removing classes here.

<TTextElement :remove-class="{
  classname: ['class-value-1', 'class-value-2']
}" ... />

Removes classes from any of TTextElement component's class names. The classes to be removed must be listed in an array.

Conditional classes can be passed as a function with form$ param, eg.:

<TTextElement :remove-class="(form$) => ({
  classname: form$.el$('other_field')?.value === 'some_value'
    ? ['class-value-1', 'class-value-2']
    : [],
})" ... />

Learn more about removing classes here.

<TTextElement :replace-classes="{
  ComponentName: {
    classname: {
      'from-class': 'to-class',
      'from-class': ['to-class'],
      'from-class': [{'to-class': true}],
    }
  }
}" ... />

Replaces classes of any class names of any component. The keys are the original class names and the values are the replacements. The keys can only be single classes, while values can contain multiple ones in string or an array. When Vue style classes are used object values must be wrapped in an array.

Conditional classes can be passed as a function with form$ param, eg.:

<TTextElement :replace-classes="(form$) => ({
  ComponentName: {
    classname: form$.el$('other_field')?.value === 'some_value' ? {
      'from-class': 'to-class'
    } : {},
  }
})" ... />

Learn more about replacing classes here.

<TTextElement :replace-class="{
  classname: {
    'from-class': 'to-class',
    'from-class': ['to-class'],
    'from-class': [{'to-class': true}],
  }
}" ... />

Replaces the classes of any class names of TTextElement component. The keys are the original class names and the values are the replacements. The keys can only be single classes, while values can contain multiple ones in string or an array. When Vue style classes are used object values must be wrapped in an array.

Conditional classes can be passed as a function with form$ param, eg.:

<TTextElement :replace-class="(form$) => ({
  classname: form$.el$('other_field')?.value === 'some_value' ? {
    'from-class': 'to-class'
  } : {},
})" ... />

Learn more about replacing classes here.

<TTextElement :override-classes="{
  ComponentName: {
    classname: 'class-value',
    classname: ['class-value'],
    classname: [{'class-value': true}],
  }
}" ... />

Overrides the classes of any component's class names. The classes can have string or array values. When Vue style classes are used object values must be wrapped in an array.

Conditional classes can be passed as a function with form$ param, eg.:

<TTextElement :override-classes="(form$) => ({
  ComponentName: form$.el$('other_field')?.value === 'some_value' ? {
    classname: 'class-value'
  } : {}
})" ... />

Learn more about overriding classes here.

<TTextElement :override-classes="{
  ComponentName: {
    classname: 'class-value',
    classname: ['class-value'],
    classname: [{'class-value': true}],
  }
}" ... />

Overrides the classes of any of TTextElement component's class names. The classes can have string or array values. When Vue style classes are used object values must be wrapped in an array.

Conditional classes can be passed as a function with form$ param, eg.:

<TTextElement :override-class="(form$) => (form$.el$('other_field')?.value === 'some_value' ? {
  classname: 'class-value'
} : {})" ... />

Learn more about overriding classes here.

<template>
  <div id="app">
    <Vueform>
      <TTextElement :templates="{ ElementError }" ... />
    </Vueform>
  </div>
</template>

<script>
import { markRaw } from 'vue'
import CustomElementError from './CustomElementError.vue'

export default {
  data() {
    return {
      ElementError: markRaw(CustomElementError),
    }
  }
}
</script>

Overrides templates used by the component.

Learn more about overriding templates here.

<TTextElement :presets="['preset1', 'preset2']" ... />

The presets to be applied for the component.

Learn more about presets classes here.

<script>
import { Vueform, useVueform } from '@vueform/vueform';
import CustomDescriptionSlot from 'path/to/CustomDescriptionSlot.vue';

export default {
  mixins: [Vueform],
  setup: useVueform,
  data: () => ({
    vueform: {
      schema: {
        element: {
          type: 't-text',
          slots: {
            label: '<span>Label</span>',
            description: CustomDescriptionSlot,
          }
        }
      }
    }
  })
}
</script>

With this option you can define slot values in a schema based form that you would normally just write inline. The value of a slot can be a plain string, HTML or a component with render function.

While this option can be also used in inline forms, it's primarily intended for schema based forms.

The aria-* attributes of the input.

The language code of the currently selected language (2 letters).

Available language codes.

The localized placeholder of the element.

Whether the element is readonly.

Whether the element is required (has required rule).

Whether the element should use a custom logic for checking if it is filled when validating.

Whether the element is filled is useCustomFilled is true.

Whether the element has its default value.

The value of the element.

Intermediary value between element's value and field's v-model. It is required when we need to transform the value format between the element and its field.

Whether the element has no value filled in.

The path of the element using dot . syntax.

The path of the element's data using dot . syntax.

The parent component of the element.

Whether all the languages have already been validated at least once.

Whether the element has failing rules in any language.

Whether the element's value has been modified in any language.

Whether the element has any async rules in progress in any language.

Whether the element has a validation rule with pending debounce in any language.

Whether the element is pending or debouncing in any language.

Instance of MessageBag service. Custom errors and messages can be added.

All the errors of MessageBag.

The first error of MessageBag.

Whether no conditions are defined or they are all fulfilled.

Whether the element was hidden programmatically with show() or hide() methods.

Whether the element is visible. It's false when available or active is false or hidden is true.

Whether the element is focused.

Whether the element is disabled.

Whether the element is in loading state.

Whether the field has been filled in successfully.

Whether the field has errors.

The ref to the outermost DOM of the element.

The main input field of the element.

The id of the input field. If id is not provided path will be used.

Whether the element has a label option, a #label slot or Vueform component's forceLabels option is true.

Whether the element floating label.

The resolved size of the element and all of its child components.

The name of the resolved view for the component and the default view for its child components. Child component views can be overridden with views option. This one should be used to determine the component's view in class functions.

The component's template.

The component's classes.

The global theme object, which contains all the default templates and classes.

The root form's component.

The element's component.

Whether the element has been already mounted.

Checks each validation rule for the element in a specific language (async).

Clears the manually added messages from the messageBag.

Disables the element.

Enables the element even if it is disabled by disabled option.

Adds a listener for an event.

Removes all listeners for an event.

Fires and emits an event.

Checks each validation rule for the element in every language (async).

Removes the element's dirty state.

Sets the validators to default state.

Re-initializes validators when rules have changed.

Hides the element.

Shows the element if it was hidden with hide() method.

Triggered when the input is resetted.

Triggered when the input is cleared.

Triggered when the element's value is changed.

Triggered when the input is blurred.

Triggered when the input is focused.

Triggered on keydown.

Triggered on keyup.

Triggered on keypress.

Triggered in beforeCreate hook.

Triggered in created hook.

Triggered in beforeMount hook.

Triggered in mounted hook.

Triggered in beforeUpdate hook.

Triggered in updated hook.

Triggered in beforeUnmount (or beforeDestroy in Vue 2) hook.

Triggered in unmounted (or destroyed in Vue 2) hook.

Renders a label for the element in ElementLabel component.

Renders an info icon in ElementInfo component next the the element label. When the icon is hovered it shows the content of this slot. The element needs to have a label to render this.

Renders description for the element in ElementDescription component.

Renders an ElementText component before the input field.

Renders an ElementText component after the input field and before description.

Renders an ElementText component after the description and error.

Prepends an addon to the input field.

Appends an addon to the input field.