Advanced Input Field

Advanced Input Field

The AdvancedInputField component is a flexible and customizable form input used to collect text, number, or date inputs along with additional options like condition filters and action buttons.

Features

• Supports input types: text, number, and date
• Optional condition dropdown for filtering logic
• Configurable buttons for actions like Search, View, and Add
• Supports custom input renderer via renderInput
• Integrates easily with form libraries like Formik
• Built with PrimeReact components and TailwindCSS for styling

Props

Prop	Type	Default	Description
name	string	–	Field name (used in callbacks)
label	string	"Label"	Field label
type	"text" | "number" | "date"	"text"	Type of input
value	{ value: any, query: string }	{ value: "", query: "" }	Input value and condition query
onValueChange	function(name, value)	–	Called when input value changes
onQueryChange	function(name, value)	–	Called when condition dropdown changes
showCondition	boolean	true	Whether to show the condition dropdown
searchable	boolean	false	Whether to show a search button
onSearch	function(label)	–	Called on search button click
viewable	boolean	false	Whether to show a view button
onView	function(label)	–	Called on view button click
appendable	boolean	false	Whether to show an add button
onAppend	function(label)	–	Called on add button click
isFormDisabled	boolean	false	Disables the condition dropdown
size	"small" | "medium" | "large"	"small"	Controls the height/size of the input group
renderInput	function(value, onChange)	–	Custom renderer for the input element

Example Usage

<AdvancedInputField
  name="searchField"
  label="Search"
  type="text"
  value={{ value: "abc", query: "contains" }}
  onValueChange={(name, value) => console.log(name, value)}
  onQueryChange={(name, value) => console.log(name, value)}
  searchable
  onSearch={(label) => console.log("Searching", label)}
  showCondition
/>

Condition Options

Type	Options
text	Contains, Begins With, Ends With, Exact Match
number	Equals, Greater Than, Less Than
date	Before, After, On

---

This component is part of the reusable UI library and can be extended or styled as needed.