Textarea

Textarea adds styling and auto-resize functionality to standard textarea element.

Download #


npx volt-vue add textarea

Import #


import Textarea from '@/volt/Textarea.vue';

Basic #

Textarea is used with the v-model property for two-way value binding.


<template>
    <div class="card flex justify-center">
        <Textarea v-model="value" rows="5" cols="30" class="resize-none" />
    </div>
</template>

<script setup lang="ts">
import Textarea from '@/volt/Textarea.vue';
import { ref } from 'vue';

const value = ref(null);
</script>

Auto Resize #

When autoResize is enabled, textarea grows instead of displaying a scrollbar.


<template>
    <div class="card flex justify-center">
        <Textarea v-model="value" autoResize rows="5" cols="30" />
    </div>
</template>

<script setup lang="ts">
import Textarea from '@/volt/Textarea.vue';
import { ref } from 'vue';

const value = ref(null);
</script>

Filled #

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.


<template>
    <div class="card flex justify-center">
        <Textarea v-model="value" rows="5" cols="30" variant="filled" />
    </div>
</template>

<script setup lang="ts">
import Textarea from '@/volt/Textarea.vue';
import { ref } from 'vue';

const value = ref(null);
</script>

Sizes #

InputText provides small and large sizes as alternatives to the base.


<template>
<div class="card flex flex-col items-center gap-4">
        <Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
        <Textarea v-model="value2" placeholder="Normal" rows="3" />
        <Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
    </div>
</template>

<script setup lang="ts">
import Textarea from '@/volt/Textarea.vue';
import { ref } from 'vue';

const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
</script>

Invalid #

Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.


<template>
    <div class="card flex justify-center">
        <Textarea v-model="value" rows="5" cols="30" :invalid="!value" class="resize-none" placeholder="Address" />
    </div>
</template>

<script setup lang="ts">
import Textarea from '@/volt/Textarea.vue';
import { ref } from 'vue';

const value = ref(null);
</script>

Disabled #

When disabled is present, the element cannot be edited and focused.


<template>
    <div class="card flex justify-center">
        <Textarea v-model="value" rows="5" cols="30" disabled class="resize-none" />
    </div>
</template>

<script setup lang="ts">
import Textarea from '@/volt/Textarea.vue';
import { ref } from 'vue';

const value = ref(null);
</script>