Text Area
Basic usage
Model value: initial value
<script setup lang="ts">
import { TextArea } from '@vuetags/inputs';
import { ref } from 'vue';
const model = ref<string>('initial value');
</script>
<template>
<p>
<text-area v-model="model" />
Model value: <span>{{ model }}</span>
</p>
</template><script setup>
import { TextArea } from '@vuetags/inputs';
import { ref } from 'vue';
const model = ref('initial value');
</script>
<template>
<p>
<text-area v-model="model" />
Model value: <span>{{ model }}</span>
</p>
</template>Model
You can use the v-model as you're used to in Vue. Check the official documentation for more information on how to use models.
You can add the existing Vue model modifiers to the model. Besides that there are additional modifiers you can add:
uppercase
The uppercase modifier changes the value (as you've guessed) to an uppercased variant.
<script setup lang="ts">
import { TextArea } from '@vuetags/inputs';
const model = ref<string>('my special value');
</script>
<template>
<!-- Will display the value "foo" as "FOO" -->
<text-area v-model.uppercase="model" />
</template><script setup>
import { TextArea } from '@vuetags/inputs';
const model = ref('my special value');
</script>
<template>
<!-- Will display the value "foo" as "FOO" -->
<text-area v-model.uppercase="model" />
</template>lowercase
The uppercase modifier changes the value (shockingly) to an lowercased variant.
<script setup lang="ts">
import { TextArea } from '@vuetags/inputs';
const model = ref<string>('FOO');
</script>
<template>
<!-- Will display the value "FOO" as "foo" -->
<text-area v-model.lowercase="model" />
</template><script setup>
import { TextArea } from '@vuetags/inputs';
const model = ref('FOO');
</script>
<template>
<!-- Will display the value "FOO" as "foo" -->
<text-area v-model.lowercase="model" />
</template>Props
The TextArea element allows all default HTML properties and attributes. Apart from those the following properties are added:
filters
Filters can be used to filter out characters on input. This prevents characters from being added when typing, when pasting and when providing an initial value. These are either a single filter or an array of multiple filters. They can be predefined presets, regular expressions and/or custom functions.
When you use multiple filters, they are executed in order in which they are provided.
Type definition
// One or more filter presets, regular expressions and/or custom functions
filters?: Filters | Filters[];
// Combination of presets and/or functions
type Filters = FilterPreset | RegExp | TransformFunction;
// Available filter presets
type FilterPreset = 'letters' | 'numbers';
// Filter function. Needs to return a string.
type TransformFunction = (value: string) => string;A single filter
A single filter can be directly added to the prop. This can be done directly in the template or as a variable.
<script setup lang="ts">
import { TextArea } from '@vuetags/inputs';
const filter = (value: string) => (value.match(/[^A-Za-z]/g) || []).join('');
</script>
<template>
<!-- A single preset -->
<text-area filters="letters" />
<!-- A single regular expression -->
<text-area :filters="/[^A-Za-z]/g" />
<!-- A single function -->
<text-area :filters="filter" />
</template><script setup>
import { TextArea } from '@vuetags/inputs';
const filter = (value) => (value.match(/[^A-Za-z]/g) || []).join('');
</script>
<template>
<!-- A single preset -->
<text-area filters="letters" />
<!-- A single regular expression -->
<text-area :filters="/[^A-Za-z]/g" />
<!-- A single function -->
<text-area :filters="filter" />
</template>Multiple filters
Multiple filters can be added as an array. This can be a combination of custom functions, regular expressions and/or presets.
<script setup lang="ts">
import { TextArea } from '@vuetags/inputs';
const filter = (value: string) => (value.match(/[^A-Za-z]/g) || []).join('');
</script>
<template>
<text-area :filters="['letters', /[^A-Za-z]/g, filter]" />
</template><script setup>
import { TextArea } from '@vuetags/inputs';
const filter = (value) => (value.match(/[^A-Za-z]/g) || []).join('');
</script>
<template>
<text-area :filters="['letters', /[^A-Za-z]/g, filter]" />
</template>modifiers
Modifiers can be used to modify values on input. This modifies the value when typing, when pasting and when providing an initial value. These are either a single filter or an array of multiple modifiers. They can be predefined presets, regular expressions and/or custom functions.
When you use multiple modifiers, they are executed in order in which they are provided.
Type definition
// One or more modifier presets and/or custom functions
modifiers?: Modifiers | Modifiers[];
// Combination of presets and/or functions
type Modifiers = ModifierPreset | TransformFunction;
// Available modifiers presets
type ModifierPreset = 'uppercase' | 'lowercase';
// Modifier function. Needs to return a string.
type TransformFunction = (value: string) => string;A single modifier
A single modifier can be directly added to the prop. This can be done directly in the template or as a variable.
<script setup lang="ts">
import { TextArea } from '@vuetags/inputs';
const modifier = (value: string) => value.toUpperCase();
</script>
<template>
<!-- A single preset -->
<text-area modifiers="uppercase" />
<!-- A single function -->
<text-area :modifiers="modifier" />
</template><script setup>
import { TextArea } from '@vuetags/inputs';
const modifier = (value) => value.toUpperCase();
</script>
<template>
<!-- A single preset -->
<text-area modifiers="uppercase" />
<!-- A single function -->
<text-area :modifiers="modifier" />
</template>Multiple modifiers
Multiple modifiers can be added as an array. This can be a combination of custom functions and/or presets.
<script setup lang="ts">
import { TextArea } from '@vuetags/inputs';
const modifier = (value: string) => value.toUpperCase();
</script>
<template>
<text-area :modifiers="['uppercase', modifier]" />
</template><script setup>
import { TextArea } from '@vuetags/inputs';
const modifier = (value) => value.toUpperCase();
</script>
<template>
<text-area :modifiers="['uppercase', modifier]" />
</template>validators
Validators are used to validate the user's input. Validation is triggered manually by using the validate function. These are either a single validator or an array of multiple validators. These can be predefined presets and/or custom functions.
Type definition
// One or more validation presets and/or custom functions
validators?: Validation | Validation[];
// Combination of presets and/or functions
type Validation = ValidationPreset | ValidationFunction;
// Available validation presets
type ValidationPreset = 'required';
// Validation function. Needs to return false or a string if validation fails,
// true otherwise
export type ValidationFunction<ModelValue = string> =
(modelValue: ModelValue, ...args: unknown[]) => boolean | string;A single validator
A single validator can be directly added to the prop. This can be done directly in the template or as a variable.
<script setup lang="ts">
import { TextArea } from '@vuetags/inputs';
</script>
<template>
<!-- A single preset -->
<text-area validators="required" />
<!-- A single function -->
<text-area :validators="(value: string) => value?.length > 5" />
</template><script setup>
import { TextArea } from '@vuetags/inputs';
</script>
<template>
<!-- A single preset -->
<text-area validators="required" />
<!-- A single function -->
<text-area :validators="(value) => value?.length > 5" />
</template>Multiple validators
Multiple validators can be added as an array. This can be a combination of custom functions and/or presets.
<script setup lang="ts">
import { TextArea } from '@vuetags/inputs';
const validatorFunction = (value: string) => value?.length > 5;
</script>
<template>
<text-area :validators="['required', validatorFunction]" />
</template><script setup>
import { TextArea } from '@vuetags/inputs';
const validatorFunction = (value) => value?.length > 5;
</script>
<template>
<text-area :validators="['required', validatorFunction]" />
</template>Available presets
required
The required preset checks if the checkbox is checked. If the checkbox is not checked, it will return 'required' in the validation result.
Emits
The TextArea element allows the default HTML events that are normally emitted.
Exposed functions
By utilizing Vue template refs you have access to additional functions. These can be programmatically triggered to perform the following actions.
focus
Programmatically trigger focus on the element.
<script setup lang="ts">
import { TextArea } from '@vuetags/inputs';
import { useTemplateRef } from 'vue';
const element = useTemplateRef<InstanceType<typeof TextArea>>('text-area');
function focus(): void {
element.value.focus();
}
</script>
<template>
<text-area ref="text-area" />
<button @click="focus">Trigger focus on element</button>
</template><script setup>
import { TextArea } from '@vuetags/inputs';
import { useTemplateRef } from 'vue';
const element = useTemplateRef('text-area');
function focus() {
element.value.focus();
}
</script>
<template>
<text-area ref="text-area" />
<button @click="focus">Trigger focus on element</button>
</template>blur
Programmatically remove focus from the element.
<script setup lang="ts">
import { TextArea } from '@vuetags/inputs';
import { useTemplateRef } from 'vue';
const element = useTemplateRef<InstanceType<typeof TextArea>>('text-area');
function blur(): void {
element.value.blur();
}
</script>
<template>
<text-area ref="text-area" />
<button @click="blur">Remove focus from element</button>
</template><script setup>
import { TextArea } from '@vuetags/inputs';
import { useTemplateRef } from 'vue';
const element = useTemplateRef('text-area');
function blur() {
element.value.blur();
}
</script>
<template>
<text-area ref="text-area" />
<button @click="blur">Remove focus from element</button>
</template>validate
Programmatically trigger validation of the current value. Runs all the provided validators in order in which they are provided and returns the results.
<script setup lang="ts">
import { type ValidationFunction, TextArea } from '@vuetags/inputs';
import { useTemplateRef } from 'vue';
const element = useTemplateRef<InstanceType<typeof TextArea>>('text-area');
const validators: ValidationFunction[] = [
(value: string) => (value && value.trim() !== '') || 'This field is required'
];
function validate(): void {
// If the value is empty, it logs:
// { valid: false, failed: ['This field is required'] }
console.log(element.value.validate());
}
</script>
<template>
<text-area ref="text-area" :validators="validators" />
<button @click="validate">Validate value</button>
</template><script setup>
import { TextArea } from '@vuetags/inputs';
import { useTemplateRef } from 'vue';
const element = useTemplateRef('text-area');
const validators = [
(value) => (value && value.trim() !== '') || 'This field is required'
];
function validate() {
// If the value is empty, it logs:
// { valid: false, failed: ['This field is required'] }
console.log(element.value.validate());
}
</script>
<template>
<text-area ref="text-area" :validators="validators" />
<button @click="validate">Validate value</button>
</template>Return type definition
type ValidationResult = {
valid: boolean;
failed: string[];
};