@vaadin/text-field

What is @vaadin/text-field?

@vaadin/text-field is a web component for creating text input fields. It provides a customizable and accessible text input element that can be used in web applications. The package is part of the Vaadin component library, which is designed to work seamlessly with modern web frameworks.

What are @vaadin/text-field's main functionalities?

Basic Text Field

This code demonstrates a basic text field with a label. The text field is a simple input element that allows users to enter text.

<vaadin-text-field label="Name"></vaadin-text-field>

Password Field

This code shows how to create a password field using @vaadin/text-field. The password field masks the input to protect sensitive information.

<vaadin-password-field label="Password"></vaadin-password-field>

Text Area

This code demonstrates a text area, which is a multi-line text input field. It is useful for longer text inputs such as comments or descriptions.

<vaadin-text-area label="Description"></vaadin-text-area>

Validation

This code sample shows how to add validation to a text field. The field uses a regular expression pattern to validate email addresses and displays an error message if the input is invalid.

<vaadin-text-field label="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" error-message="Please enter a valid email address"></vaadin-text-field>

Other packages similar to @vaadin/text-field

react-text-field

react-text-field is a React component for creating text input fields. It offers similar functionality to @vaadin/text-field but is specifically designed for React applications. It provides customizable input fields with support for validation and styling.

README

@vaadin/text-field

A web component that allows the user to input and edit text.

Documentation + Live Demo ↗

<vaadin-text-field label="Street Address"></vaadin-text-field>

Installation

Install the component:

npm i @vaadin/text-field

Once installed, import the component in your application:

import '@vaadin/text-field';

Themes

Vaadin components come with two built-in themes, Lumo and Material. The main entrypoint of the package uses Lumo theme.

To use the Material theme, import the component from the theme/material folder:

import '@vaadin/text-field/theme/material/vaadin-text-field.js';

You can also import the Lumo version of the component explicitly:

import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';

Finally, you can import the un-themed component from the src folder to get a minimal starting point:

import '@vaadin/text-field/src/vaadin-text-field.js';

Contributing

Read the contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

License

Apache License 2.0

Vaadin collects usage statistics at development time to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.