Input
The Input component is a versatile and customizable form element designed to capture user input efficiently.
Installation
Install the package
npm i @start-base/react-form-elementsAdd the styles
To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.
app/layout.tsx
import "@start-base/react-form-elements/styles.css";Import the component
import Input from '@start-base/react-form-elements/Input';Usages
Input with Label
Input with Placeholder
Input with Placeholder and Label
Input with Placeholder And Label And Disable Shrink
Input Disabled
Input Append
Input Prepend
Input Error
Error Message
API
A basic input component with options for prepending and appending elements.
| Name | Type | Default | Description |
|---|---|---|---|
| name | string | Name of the input | |
| label | string | null | Label of the input |
| placeholder | string | null | Placeholder of the input |
| disableShrink | boolean | false | Position the label outside of the input |
| value | string or number | Value of the input | |
| onChange | function | Callback function that is fired when the value changes. | |
| inputClassName | string | null | Classname for input element |
| labelClassName | string | null | Classname for label element |
| errorClassName | string | null | Classname for error element |
| disabled | boolean | false | Disable the input |
| error | string or boolean or object | null | Error message to display below the input. if value is a boolean input border will be change. Also you can pass schema validator error objects. |
| prepend | string or element | null | Prepend text to the input |
| append | string or element | null | Append text to the input |
| appendClassName | string | null | Classname for append element |
| prependClassName | string | null | Classname for prepend element |