FormInput

<FormInput
  isRequired?: boolean
  isDisabled?: boolean
  label?: string
  type?: string
  name?: string
  error?: string
  defaultValue?: string
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
  showError?: boolean
  leftSection?: React.ReactNode
  className?: string
  ...rest
> : JSX.Element

• isRequired: Marks the input as required. Defaults to true.
• isDisabled: Disables the input. Defaults to false.
• label: Optional label for the input.
• type: The input type (e.g., text, password). Defaults to text.
• name: The name of the input field for form submission.
• error: Displays an error message if provided.
• defaultValue: Sets the initial value of the input.
• onChange: Callback function for handling value changes.
• showError: Determines whether error messages are shown. Defaults to true.
• leftSection: Optional content (e.g., an icon) displayed to the left of the input.
• className: Additional CSS classes for styling.

Example

import { FormInput } from "@explita/daily-toolset/form";

function App() {
  const [value, setValue] = useState("");

  return (
    <div>
      <FormInput
        label="Username"
        name="username"
        defaultValue={value}
        onChange={(e) => setValue(e.target.value)}
        error={value.length < 3 ? "Must be at least 3 characters" : ""}
      />
    </div>
  );
}

Extended Inputs

• FormInput.Password: Enhanced password input with strength meter and validation:

  <FormInput.Password
    label="Password"
    minLength={8}
    showRequirements={true}
  />

  Password Requirements

  • Includes at least one number.
  • Includes at least one lowercase letter.
  • Includes at least one uppercase letter.
  • Includes at least one special character.
  • Minimum length of 6 characters (configurable).
• FormInput.Search: Input optimized for search functionality:

  <FormInput.Search
    placeholder="Search for items..."
  />

• FormInput.Date: A specialized date picker input.

  <FormInput.Date
    label="Date of Birth"
    placeholder="MM/DD/YYYY"
  />

Use Cases

• Building form inputs with flexible validation and error handling.
• Creating secure password fields with dynamic strength indicators.
• Implementing search bars with optional icons or placeholders.