Input

The Input component allows users to enter and edit text in a form field. It provides several features, such as placeholder text, label, disabled state, and help text. The component is highly customizable and can be integrated into various forms and layouts.

Usage

To use the Input component, import it into your React component and render it with the appropriate props. The following props are available:

• isDisabled (boolean): If true, the input will be disabled.
• isHelping (boolean): If true, a help message will be displayed next to the input.
• isLabelable (boolean): If true, the input will have a visible label.
• helpMode (HelpType): The type of help message to display, either "warning" or "error".
• helpText (string): The text to display in the help message.
• placeholder (string): The text to display as a placeholder in the input.
• name (string): The name of the input field.
• classNameContainer (string): A CSS class to apply to the container of the input.
• dialog (string): A dialog to display when an error occurs.
• touch (boolean): If true, the input has been interacted with.
• setTouch ((event?: any) => void): A function to set the touch state of the input.
• setValue ((event?: any) => void): A function to set the value of the input.
• reset ((event?: any) => void): A function to reset the value of the input.

States

The Input component can be in various states depending on user interaction. The following states are available:

• Default: This is the default state of the input.
• Disabled: This state is triggered when the input is disabled.
• Helping: This state is triggered when the input has a help text associated with it and the user has interacted with it. Error: This state is triggered when the input has an error associated with it.
• Focused: This state is triggered when the input is focused.

Accessibility

Inputs should be designed with accessibility in mind. The following guidelines should be followed:

• Inputs should have a descriptive label that explains the information that should be entered. Inputs should have a discernible focus state and be keyboard navigable.
• The input and its label should have an appropriate contrast ratio between the text and background color.
• If an input has an error associated with it, it should be announced to screen reader users when the input receives focus.
• Similarly, if an input has a help text associated with it, it should be announced to screen reader users when the input receives focus.

Usage of Input Component with useForm Hook

The Input component can be used in a form along with the useForm hook to easily manage form values and validations.

To use the Input component with useForm, first import the useForm and useInputValue hooks from the same file as the Input component.

Next, create an object with key/value pairs where the keys match the names of the form inputs and the values are the initial values for those inputs.

Then, call the useForm hook and pass the object of initial form values. This hook will return an object where each key is the name of an input and the value is an object containing the current value, any errors, and whether or not the input has been touched.

Now, you can use the Input component in your form and pass in the appropriate props. To link the Input component to the useForm hook, use the name of the input as the key to access the corresponding value object from the formData object.

Note that the useForm hook does not handle any form submissions or server-side logic. It is solely responsible for managing form values and validations on the client-side.