Generate and export Tailwind color patterns.
Detailed documentation for the Input component in the PixelBlockUI library.
The Input component is a versatile and customizable input component designed to work seamlessly with Tailwind CSS. It supports various input types, colors, and border radius configurations.
To install the InputField component in your project, use the following CLI command:
npx pixelblock-cli add InputField
This command will add the required component files and dependencies to your project. Ensure you have the PixelBlockUI CLI installed. If not, you can install it globally using:
npm install -g pixelblock-cli
Once installed, you can import and use the InputField component:
import InputField from './components/InputField';
For seamless integration, make sure your project is set up with Tailwind CSS, as this component utilizes utility-first classes for styling.
You can specify different colors using the color prop:
The radius prop allows customization of the input field's border radius:
Use the type prop to render a textarea instead of an input:
The InputField component accepts the following props:
| Prop | Type | Default | Description |
|---|---|---|---|
color | "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "default" | Specifies the color theme of the input field. |
radius | "full" | "lg" | "md" | "sm" | "none" | "md" | Defines the border radius of the input field. |
label | string | undefined | A label for the input field. When provided, it appears above the input. |
type | "input" | "textarea" | "number" | "password" | "email" | "input" | Specifies the type of the input field. |
props | Omit<React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "size"> | undefined | Additional props passed down to the input or textarea element. |
The InputField component is a flexible and highly customizable component that fits well in any React or Next.js project using Tailwind CSS. Use the props provided to tailor the component to your specific needs and integrate it seamlessly into your application.
For more information and detailed usage instructions, refer to the PixelBlockUI Documentation.