Input Field

The InputField component is a flexible and reusable input wrapper, designed to provide a consistent user experience across different form elements. It encapsulates an input field alongside optional icons, action buttons, and custom focus handling. This component is ideal for use in forms or any UI requiring user input, with accessibility and customization in mind.

Installation

bash

npm i @anakin-gbit/input-field

Component Overview

InputField is a composite component that maintains state for input focus, supports unique IDs for accessibility, and allows customization through child components. The following child elements can be passed to InputField to customize its functionality:

InputField.Input: The primary text input element.
InputField.TextArea: A multi-line text area.
InputField.Icon: An icon element that appears withing the input or textarea.
InputField.FieldActionButton: Button elements for actions associated with the input.

Usage Example

Input label🔍

Enter the value above

Invalid email

JSX

import { InputField } from '@anakin-gbit/inputfield'

const Example = () => (
  <InputField id="username">
    <InputField.Icon>🔍</InputField.Icon>
    <InputField.Input label="Input label" />
    <InputField.FieldActionButton>Save</InputField.FieldActionButton>
    <InputField.FieldActionButton>Cancel</InputField.FieldActionButton>
    <InputField.FieldMessage message="Enter the value above" />
    <InputField.FieldMessage message="Invalid email" type="error" />
  </InputField>
)

Using InputField for Numeric Values

When using the InputField component to handle numeric values (such as prices or fees), it is important to ensure that input values are correctly parsed and updated. The following example shows how to manage numeric fields, ensuring that only valid numbers are entered, and that the input handles edge cases like decimals correctly.

Price per Unit

JSX

const [pricePerUnit, setPricePerUnit] = useState<string>(0)

<InputField id="pricePerUnit">
  <InputField.Numeric
    label="Price per Unit"
    name="pricePerUnit"
    value={pricePerUnit}
    onChange={(e) => setPricePerUnit(e.target.value)}
    decimalPlaces={3}
  />
</InputField>

Props

The InputField component accepts the following props:

id (optional): A unique identifier for the input field. If not provided, a unique ID will be generated.
className (optional): A custom class name that will be applied to the root div element of the component.
children (optional): The child elements that make up the input field, such as InputField.Input, InputField.Icon, and InputField.FieldActionButton.
onBlur (optional): A callback function that is triggered when the input field loses focus.
onFocus (optional): A callback function that is triggered when the input field gains focus.

Subcomponents and Their Props

The InputField component has the following subcomponents, which allow for customizable behavior and appearance:

InputField.Input: A standard text input element.; label (optional): A label for the input field, typically displayed above or beside the input element.; defaultValue (optional): The default value of the input.; onChange (optional): A callback that is triggered when the input value changes.; type (optional): The type of the input (e.g., "text", "password"). Defaults to "text".
InputField.Numeric: A specialized input field for numeric values.; label (optional): A label for the numeric input field.; value: The current value of the input, which should be a string or an empty string. This value represents the numeric input entered by the user.; onChange: A callback that is triggered when the numeric input value changes. This should accept a `ChangeEvent` and handle state updates.; decimalPlaces (optional, default=2): The number of decimal places allowed in the input. This restricts the value to the specified number of decimal places (e.g., `2` for two decimal places).
InputField.TextArea: A textarea element.; label (optional): A label for the textarea.; defaultValue (optional): The default value of the textarea.; onChange (optional): A callback that is triggered when the textarea value changes.; rows (optional): The number of visible rows in the textarea. Defaults to 3.
InputField.Icon: A customizable icon displayed next to the input field.; children: The icon's content, usually passed as text or an icon component (e.g., FontAwesome, Material Icons).
InputField.FieldActionButton: A button or action element that can be used to perform actions like save, cancel, etc.; children: The text or element inside the action button (e.g., "Save", "Cancel").; onClick (optional): A callback that is triggered when the action button is clicked.