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.
Composed Components
When you plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.
The Text Field's decked out with several components to make it bangin'.
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.
And next, you can copy the code below and paste it into your dopest component folder.
Anatomy
Import the components and use them as shown below, adapting the structure to fit each component.
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.
Is Loading
Activate the loading state on your TextField with the isLoading prop. Adjust the loaderPosition to position the loader as desired.
Controlled
Manage the TextField value through the value prop for controlled usage.
Validation
Validate the TextField input using the isInvalid prop.
Readonly
Set the TextField to readonly, preventing any edits.
Disabled
When the TextField is disabled, it becomes non-editable and appears inactive.