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>
)

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.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.