Forms is the most commonly used to enable users to log in, to update a profile, to enter sensitive information, and to perform many other data-entry tasks like collects user data and serves as the display or user interface within the system.
Form components help you to define the type of widget that is required to enter data and automatically adds a property to the resource endpoint to interact with the form component.
Use the following utility classes to create three different sizing options (large, base, and small) for form input elements.
Add the disabled boolean attribute on an input with
bg-neutral-100 classes to give it a neutraled out appearance
and remove pointer events and make it unusable and un-clickable.
Use the following example to make the input readonly, so that you cannot edit the input.
Input types let you specified what data users should provide and help you validate it.
input type="email" defines a field for an e-mail address.
The input value is automatically validated to ensure it is a properly
formatted e-mail address.
input type="password" defines a password field thus hiding
characters as sensitive information.
input type="number" defines field for entering a number.
input type="tel" defines a field for entering a telephone
input type="url" defines a field for entering a URL.
textarea tag defines a multi-line text input control.
Helper text conveys additional guidance about the input field, such as how it will be used.
Add an empty form helper element, set
data-te-input-showcounter="true" for input and set the
maxlength attribute to create a counter.
Wrap a pair of
label elements with
.relative class and add classes as below to enable floating
labels text-based form fields.