Trusted by the world’s leading companies
Overview
The Vue TextBox (text field) is a component for editing, displaying, or entering plain text on forms to capture user names, phone numbers, email addresses, and more. This component is an extended version of the HTML5 TextBox (input type text) component with icons, floating labels, sizing, grouping, validation states, and more. It is available in an HTML5/CSS version and a JavaScript version.
Vue TextBox
The Vue TextBox component provides a floating label with minimal configuration. It supports most of the features that are available in the pure HTML5/CSS version of the TextBox component.
HTML5/CSS TextBox
The simple TextBox component renders using pure CSS and HTML. It supports all the essential features, such as input groups with icons, floating labels, multiline text, sizing, validation states, and more.
Input group
Easily create input groups by prepending or appending icons, buttons, or text in the TextBox component. For example, you can prepend text with a dollar symbol ($) for price input, or prepend an at sign (@) for user names.
Floating label (placeholder text)
The Vue TextBox component floats placeholder text to the top of the input box with an animation when the input receives focus or the input has a value. The floating label is used to ensure the input value and label are always visible.
Input sizing
The TextBox component has built-in sizing support (normal and small modes) to fit the input box’s size with sufficient padding and spacing.
Input validation with HTML forms
The Vue TextBox component can validate the input value and apply the corresponding validation styles for success, error, and warning states, which are used in most standard HTML forms.
Multiline TextBox
The TextBox component can handle multiple lines of text with a floating label that helps you accept addresses, descriptions, comments, feedback, and more.
Get and set text box values
Easily set or retrieve the value in the Vue TextBox component to process it and enable a clear button to allow users to reset the input value.
Adornments
The TextBox control supports custom adornments using the prependTemplate and appendTemplate properties, which allow users to render custom elements like icons, buttons, or dropdowns to enhance user interaction with prefix and suffix elements.
Right-to-left (RTL) rendering
The Vue TextBox component supports right-to-left (RTL) rendering. Users can change the text direction and layout to be from right to left. This improves the user experience and accessibility for users who work in RTL languages.
Themes
The Vue TextBox component has several built-in themes: Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and high contrast. Users can customize any of these built-in themes or create new themes by either overriding Sass variables or using our Theme Studio application.
Developer-friendly APIs
Developers can control the appearance and behaviors of the Vue TextBox component, including its floating label, using a rich set of APIs.
Other supported frameworks
The TextBox component is also available for the Blazor, Angular, React, and JavaScript frameworks. Check out its platform-specific features through the following links:
Vue TextBox code example
Easily get started with the Vue TextBox using a few simple lines of Vue code, as demonstrated below. Also explore this Vue TextBox example, which shows you how to render and configure a TextBox in Vue.
<template>
<div class ='wrap'>
<div id ='input-container'>
<ejs-textbox id='textbox' floatLabelType="Auto" placeholder="First Name"></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";
.wrap {
box-sizing: border-box;
margin: 0 auto;
padding: 20px 10px;
width: 340px;
}
</style>Not sure how to create your first Vue TextBox? Our documentation can help.
I’d love to read it now145+ VUE UI COMPONENTS
ALL COMPONENTS
SMART COMPONENTS
GRIDS
DATA VISUALIZATION
DROPDOWNS
FILE VIEWERS & EDITORS
BUTTONS
INTERACTIVE CHAT
INPUTS
NAVIGATION
FORMS
NOTIFICATIONS
Frequently Asked Questions
Why should you choose the Syncfusion Vue TextBox?
- An extended version of the HTML input element, supporting both pure-CSS and pure-JavaScript versions.
Input groups with icons, buttons, help text, and validation messages can be easily created.
- Support for standard Syncfusion themes, including Bootstrap v5 and Tailwind CSS.
- A modern look for your entered text with floating labels.
Input size adjustments can be made and multiline mode used.
Simple configuration and API.
- Support for all modern browsers.
- Touch-friendly and responsive UI.
Extensive demos and documentation help you get started quickly with the component.
Where can I find the Syncfusion Vue TextBox demo?
You can find our Vue TextBox demo here.
Can I download and utilize the Syncfusion Vue TextBox for free?
No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.
How do I get started with the Syncfusion Vue TextBox?
A good place to start would be our comprehensive getting started documentation.
Our Customers Love Us
Having an excellent set of tools and a great support team, Syncfusion® reduces customers’ development time.Here are some of their experiences.
Syncfusion helps small companies
Syncfusion has a very good service and innovative products. People at syncfusion is helpful and tries to give solution to customer needs. Essential Studio has enough controls for most business applications.
Regina V,
Programador informático, Small-Business
Perfect for any developer
The Syncfusion Essential Studio has excellent features that are updated or added constantly on a regular basis. The support is exceptional—fast and professional responses. The support team provides you with code samples. As for the bugs, they always try to include the fix in the next release.
Dejan D,
Chief Executive Officer, Small-Business
See Real Success Stories
Developers around the world trust Syncfusion’s Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.
Read Our Customer StoriesIndustry
Software development
75% Cost reduction
50% Faster development
Industry
Utilities (oil and gas)
450+ hours saved
Streamlined processes and hours of development effort saved.
Advanced, flexible features
Empowered users through robust and versatile functionality.
Industry
Software and technology
1000+ of hours saved
Accelerated development with enterprise-ready UI components.
Efficient file management
Streamlined workflows with document libraries without building them from scratch.
Industry
Software and technology
2 Years of delay avoided
Two years of delays prevented with proactive planning.
On-time delivery
Projects delivered on schedule using trusted controls.
Industry
IT services and IT consulting
Improved performance
Large datasets handled with easy customization and quick debugging.
Highly customizable
Plug-and-play controls with quick template integration.
Industry
Professional services
Instant access
Quick availability of features and resources.
Reduced dependencies
Fewer dependencies for faster development.
Rated by users across the globe
Syncfusion Vue Resources
Learning
Documentation
Documentation
Awards
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion® is proud to hold the following industry awards.
