Skip to Content
FrontendBundlesComponentsUI PrimitivesInput

Input

An enhanced <input> that adds a label, helper text tooltip, error message display, and automatic password show/hide toggle.

Import

import { Input } from "@phpcreation/frontend-components-react-nextjs-bundle/components/Input";

Props

PropTypeRequiredDefaultDescription
labelstring——Field label shown above the input
requiredboolean—falseAdds a required asterisk to the label
helperTextstring——Tooltip text shown on the info icon
fieldIconReactNode——Icon rendered inside the input (left side)
errorMessagestring——Validation error shown below the input

Plus all standard HTML <input> attributes (type, placeholder, value, onChange, etc.).

Usage

import { Input } from "@phpcreation/frontend-components-react-nextjs-bundle/components/Input";
 
// Basic text input
<Input
  label="Company Name"
  placeholder="Acme Corp"
  required
/>
 
// With error
<Input
  label="Email"
  type="email"
  errorMessage="Please enter a valid email address"
/>
 
// Password (eye toggle is automatic)
<Input
  label="Password"
  type="password"
  helperText="Must be at least 8 characters"
/>

With React Hook Form

import { useForm } from "react-hook-form";
import { Input } from "@phpcreation/frontend-components-react-nextjs-bundle/components/Input";
 
const { register, formState: { errors } } = useForm();
 
<Input
  label="Name"
  required
  errorMessage={errors.name?.message}
  {...register("name")}
/>
Last updated on
ButtonTextarea