Multiline in Vue Textbox component

11 Jun 202424 minutes to read

This feature allows the textbox to accept one or more lines of text like address, description, comments, and more.

Create multiline textbox

You can convert the default textbox into the multiline textbox by setting the multiline API value as true or pass HTML5 textarea as element to the textbox.

The multiline textbox allows you to resize it in vertical direction alone.

Composition API (~/src/App.vue)

<template>
    <div class='wrap'>
        <div class="multiline">
            <ejs-textbox name='default' :multiline="true" placeholder="Enter your address"
                value='Mr. Dodsworth Dodsworth, System Analyst, Studio 103, The Business Center'></ejs-textbox>
        </div>
    </div>
</template>
<script setup>

import { TextBoxComponent as EjsTextbox } from '@syncfusion/ej2-vue-inputs';

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

#container {
    visibility: hidden;
    padding-left: 5%;
    width: 100%;
}

#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.multiline {
    margin: 10px auto;
    width: 30%;
}
</style>

Options API (~/src/App.vue)

<template>
    <div class='wrap'>
        <div class="multiline">
            <ejs-textbox name='default' :multiline="true" placeholder="Enter your address"
                value='Mr. Dodsworth Dodsworth, System Analyst, Studio 103, The Business Center'></ejs-textbox>
        </div>
    </div>
</template>
<script>

import { TextBoxComponent } from '@syncfusion/ej2-vue-inputs';

export default {
    name: "App",
    components: {
        "ejs-textbox": TextBoxComponent
    },
    data: function () {
        return {
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

#container {
    visibility: hidden;
    padding-left: 5%;
    width: 100%;
}

#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.multiline {
    margin: 10px auto;
    width: 30%;
}</style>

Implementing floating label

You can achieve the floating label behavior in the multiline textbox by setting floatLabelType as ‘Auto’. The placeholder text act as floating label to the multiline textbox. You can provide the placeholder text to the multiline textbox either by using the placeholder property or placeholder attribute.

Composition API (~/src/App.vue)

<template>
    <div class='wrap'>
        <div class="multiline">
            <label class="label">Float label type auto</label>
            <ejs-textbox id='default' :multiline="true" placeholder="Enter your address" floatLabelType="Auto"
                maxlength="15"></ejs-textbox>
            <label class="label">Float label type always</label>
            <ejs-textbox id='default' :multiline="true" placeholder="Enter your address"
                floatLabelType="Always"></ejs-textbox>
            <label class="label">Float label type never</label>
            <ejs-textbox id='default' :multiline="true" placeholder="Enter your address"
                floatLabelType="Never"></ejs-textbox>
        </div>
    </div>
</template>
<script setup>

import { TextBoxComponent as EjsTextbox } from '@syncfusion/ej2-vue-inputs';

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

#container {
    visibility: hidden;
    padding-left: 5%;
    width: 100%;
}

#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.multiline {
    margin: 10px auto;
    width: 30%;
}
</style>

Options API (~/src/App.vue)

<template>
    <div class='wrap'>
        <div class="multiline">
            <label class="label">Float label type auto</label>
            <ejs-textbox id='default' :multiline="true" placeholder="Enter your address" floatLabelType="Auto"
                maxlength="15"></ejs-textbox>
            <label class="label">Float label type always</label>
            <ejs-textbox id='default' :multiline="true" placeholder="Enter your address"
                floatLabelType="Always"></ejs-textbox>
            <label class="label">Float label type never</label>
            <ejs-textbox id='default' :multiline="true" placeholder="Enter your address"
                floatLabelType="Never"></ejs-textbox>
        </div>
    </div>
</template>
<script>

import { TextBoxComponent } from '@syncfusion/ej2-vue-inputs';

export default {
    name: "App",
    components: {
        "ejs-textbox": TextBoxComponent
    },
    data: function () {
        return {
            clickHandler: function () {
                this.$refs.textareaObj.addAttributes({ maxlength: 15 });
            }
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

#container {
    visibility: hidden;
    padding-left: 5%;
    width: 100%;
}

#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.multiline {
    margin: 10px auto;
    width: 30%;
}
</style>

Auto resizing

By default, you can manually resize the multiline textbox. But you can also create an auto resizing multiline textbox with both the initial and dynamic value change. It can be done by calculating the height of the textarea in the created event for initial value update and in the input event for dynamic value update of the auto resize multiline textbox, as explained in the following code sample.

Composition API (~/src/App.vue)

<template>
    <div class='wrap'>
        <div class="multiline">
            <ejs-textbox ref="textareaObj" id='default' :multiline="true"
                value='Mr. Dodsworth Dodsworth, System Analyst, Studio 103, The Business Center'
                placeholder="Enter your address" floatLabelType="Auto" :input="inputHandler"
                :created="createHandler"></ejs-textbox>
        </div>
    </div>
</template>
<script setup>

import { TextBoxComponent as EjsTextbox } from '@syncfusion/ej2-vue-inputs';
import { ref } from 'vue';
const textareaObj = ref(null);

const createHandler = () => {
    textareaObj.value.addAttributes({ rows: 1 });
    textareaObj.value.$el.style.height = "auto";
    textareaObj.value.$el.style.height = (textareaObj.value.$el.scrollHeight) + "px";
};
const inputHandler = (args) => {
    args.event.currentTarget.style.height = "auto";
    args.event.currentTarget.style.height = (args.event.currentTarget.scrollHeight) + "px";
};

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

#container {
    visibility: hidden;
    padding-left: 5%;
    width: 100%;
}

#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.multiline {
    margin: 10px auto;
    width: 30%;
}
</style>

Options API (~/src/App.vue)

<template>
    <div class='wrap'>
        <div class="multiline">
            <ejs-textbox ref="textareaObj" id='default' :multiline="true"
                value='Mr. Dodsworth Dodsworth, System Analyst, Studio 103, The Business Center'
                placeholder="Enter your address" floatLabelType="Auto" :input="inputHandler"
                :created="createHandler"></ejs-textbox>
        </div>
    </div>
</template>
<script>

import { TextBoxComponent } from '@syncfusion/ej2-vue-inputs';

export default {
    name: "App",
    components: {
        "ejs-textbox": TextBoxComponent
    },
    data: function () {
        return {
            createHandler: () => {
                this.$refs.textareaObj.addAttributes({ rows: 1 });
                this.$refs.textareaObj.$el.style.height = "auto";
                this.$refs.textareaObj.$el.style.height = (this.$refs.textareaObj.$el.scrollHeight) + "px";
            },
            inputHandler: (args) => {
                args.event.currentTarget.style.height = "auto";
                args.event.currentTarget.style.height = (args.event.currentTarget.scrollHeight) + "px";
            }
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

#container {
    visibility: hidden;
    padding-left: 5%;
    width: 100%;
}

#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.multiline {
    margin: 10px auto;
    width: 30%;
}
</style>

Disable resizing

By default, the multiline textbox is rendered with resizable. You can disable the resize of the multiline textbox by applying the following CSS styles.

    textarea.e-input,
    .e-float-input textarea,
    .e-float-input.e-control-wrapper textarea,
    .e-input-group textarea,
    .e-input-group.e-control-wrapper textarea {
        resize: none;
    }

Composition API (~/src/App.vue)

<template>
    <div class='wrap'>
        <div class="multiline">
            <ejs-textbox name='default' :multiline="true" placeholder="Enter your address" floatLabelType="Auto" cssClass="sample"></ejs-textbox>
        </div>
    </div>
</template>
<script setup>

import { TextBoxComponent as EjsTextbox} from '@syncfusion/ej2-vue-inputs';

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
    #container {
        visibility: hidden;
        padding-left: 5%;
        width: 100%;
    }
    #loader {
        color: #008cff;
        font-family: 'Helvetica Neue','calibiri';
        font-size: 14px;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
    .multiline{
        margin: 10px auto;
        width: 30%;
    }
    .sample textarea[name=default]{
        resize: none;
    }

</style>

Options API (~/src/App.vue)

<template>
    <div class='wrap'>
        <div class="multiline">
            <ejs-textbox name='default' :multiline="true" placeholder="Enter your address" floatLabelType="Auto"
                cssClass="sample"></ejs-textbox>
        </div>
    </div>
</template>
<script>

import { TextBoxComponent } from '@syncfusion/ej2-vue-inputs';

export default {
    name: "App",
    components: {
        "ejs-textbox": TextBoxComponent
    },
    data: function () {
        return {
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

#container {
    visibility: hidden;
    padding-left: 5%;
    width: 100%;
}

#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.multiline {
    margin: 10px auto;
    width: 30%;
}

.sample textarea[name=default] {
    resize: none;
}
</style>

Limit the text length

By default, the text length of the multiline textbox is unlimited. You can limit the text length by setting the maxLength attribute using the addAttributes method.

Composition API (~/src/App.vue)

<template>
    <div class='wrap'>
        <div class="multiline">
            <label class="label">Add maxlength attribute through inline</label>
            <ejs-textbox id='default' :multiline="true" placeholder="Enter your address" floatLabelType="Auto"
                maxlength="15"></ejs-textbox>
            <label class="label">Add maxlength attribute through addAttributes method</label>
            <ejs-textbox id='default' :multiline="true" placeholder="Enter your address" floatLabelType="Auto"
                ref="textareaObj"></ejs-textbox>
            <ejs-button id='modalbtn' v-on:click="modalBtnClick">Add max length</ejs-button>
        </div>
    </div>
</template>
<script setup>

import { TextBoxComponent as EjsTextbox } from '@syncfusion/ej2-vue-inputs';
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { ref } from 'vue';

const textareaObj = ref(null);

const modalBtnClick = () => {
    textareaObj.value.ej2Instances.addAttributes({ maxlength: 15 });
}

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";

#container {
    visibility: hidden;
    padding-left: 5%;
    width: 100%;
}

#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.multiline {
    margin: 10px auto;
    width: 30%;
}
</style>

Options API (~/src/App.vue)

<template>
    <div class='wrap'>
        <div class="multiline">
            <label class="label">Add maxlength attribute through inline</label>
            <ejs-textbox id='default' :multiline="true" placeholder="Enter your address" floatLabelType="Auto"
                maxlength="15"></ejs-textbox>
            <label class="label">Add maxlength attribute through addAttributes method</label>
            <ejs-textbox id='default' :multiline="true" placeholder="Enter your address" floatLabelType="Auto"
                ref="textareaObj"></ejs-textbox>
            <ejs-button id='modalbtn' v-on:click="modalBtnClick">Add max length</ejs-button>
        </div>
    </div>
</template>
<script>

import { TextBoxComponent } from '@syncfusion/ej2-vue-inputs';
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";

export default {
    name: "App",
    components: {
        "ejs-textbox": TextBoxComponent,
        "ejs-button": ButtonComponent
    },
    methods: {
        modalBtnClick: function () {
            this.$refs.textareaObj.addAttributes({ maxlength: 15 });
        }
    }

}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";

#container {
    visibility: hidden;
    padding-left: 5%;
    width: 100%;
}

#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.multiline {
    margin: 10px auto;
    width: 30%;
}
</style>

Count characters

You can show the number of characters entered inside the textarea by calculating the character count in the input event of multiline textbox. The character count is updated while entering or deleting any character inside the textarea. The character count shows how many characters can be entered or left to be entered.

Composition API (~/src/App.vue)

<template>
    <div class='wrap'>
        <div class="multiline">
            <ejs-textbox id='default' :multiline="true" placeholder="Enter your address" floatLabelType="Auto"
                :input="inputHandler" maxlength="25"></ejs-textbox>
            <span id='numbercount'></span>
        </div>
    </div>
</template>
<script setup>

import { TextBoxComponent as EjsTextbox } from '@syncfusion/ej2-vue-inputs';

const inputHandler = (args) => {
    let word, addresscountRem, addressCount;
    word = args.value;
    addressCount = word.length;
    addresscountRem = document.getElementById('numbercount');
    addresscountRem.textContent = addressCount + "/25";
}

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

#container {
    visibility: hidden;
    padding-left: 5%;
    width: 100%;
}

#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.multiline {
    margin: 10px auto;
    width: 30%;
}

#numbercount {
    margin-left: 170px;
}
</style>

Options API (~/src/App.vue)

<template>
    <div class='wrap'>
        <div class="multiline">
            <ejs-textbox id='default' :multiline="true" placeholder="Enter your address" floatLabelType="Auto"
                :input="inputHandler" maxlength="25"></ejs-textbox>
            <span id='numbercount'></span>
        </div>
    </div>
</template>
<script>

import { TextBoxComponent } from '@syncfusion/ej2-vue-inputs';

export default {
    name: "App",
    components: {
        "ejs-textbox": TextBoxComponent
    },
    data: function () {
        return {
            inputHandler: (args) => {
                let word, addresscountRem, addressCount;
                word = args.value;
                addressCount = word.length;
                addresscountRem = document.getElementById('numbercount');
                addresscountRem.textContent = addressCount + "/25";
            }
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

#container {
    visibility: hidden;
    padding-left: 5%;
    width: 100%;
}

#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.multiline {
    margin: 10px auto;
    width: 30%;
}

#numbercount {
    margin-left: 170px;
}
</style>