Getting Started
Dark Mode
Charts
Colors
Drag-and-drop
Forms
Utilities
Text Field
Enter text like jotting notes on your phone, offering versatility for typing and accommodating various types of information.
Text Field
A text field is a box where you can type in text, like your name or email.
Installation
If you hit any issues, make sure you check out the installation guide here for more information.
Composed Components
Plug this component into the CLI, and it automatically loads all the included components. No need to add them individually.
The Text Field comes packed with a variety of components to make it stand out.
Manual Installation
Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.
Anatomy
Suffix and Prefix
Enhance your TextField by adding a prefix or suffix. Whether it’s text or icons, it’s flexible to fit your design.
Suffix with Button
Add a button to the suffix by simply including it in the suffix prop. While you can do the same with a prefix, it’s more common to see it as a suffix.
Pending
Activate the loading state on your TextField with the isPending prop.
Revealable
When using a text field as a password input, you may want the option to reveal the password. To enable this feature, simply add the isRevealable prop. However, ensure that the input type is explicitly set to 'password', as this is a required condition.
Validation
In this example, we’ll ensure it’s treated as a strict requirement.
Controlled
Manage the TextField value through the value prop for controlled usage.
Uncontrolled
Manage the TextField value through the defaultValue prop for uncontrolled usage.
Description
You can add a description to the text field by using the description prop.
Readonly
Set the TextField to readonly, preventing any edits.
Disabled
When the TextField is disabled, it becomes non-editable and appears inactive.