📄️ Form component
The Form component wraps a set of input components that manage their combined values in a single state and allow to submit this data. It offers compatibility with native HTMLFormElement, enabling seamless integration into existing workflows.
📄️ Form field
The FormField component is designed to enhance the accessibility and usability of form inputs. It wraps a provided input element or an InputGroup and ensures that an accessible label is rendered above the input and a hint is displayed below it.
📄️ Inputs overview
Input is a component capable of capturing user's input provided by various input hardware: keyboard, mouse, touchscreen, camera, microphone, etc.
📄️ Input groups
The InputGroup component is a powerful tool for managing groups of InputCheckbox or InputRadio components, ensuring that labels and hints are properly rendered and that group name, required and disabled states are consistently applied. This enhances the overall user experience and accessibility of your forms.
📄️ ⚙️ Input capture API
Input modes
📄️ ⚙️ Input validation
Input validation in Koval is made through built-in validation properties (required, pattern, maxLength, minLength, max, min) or a validation state (external validation result or callback function prop), which supports custom and asynchronous validation.
📄️ 🧩 React Hook Form integration
React Hook Form is known for its minimal re-renders and straightforward API, which makes it an excellent choice for building highly performant forms.
📄️ 🧩 Formik integration
This guide explains how to manage form state and perform validation in Koval UI forms using Formik, a popular and powerful form library for React. We'll walk through a complete example that uses Formik for state management and Yup for validation.