FormFusion: Easy form handling, validation & more

Input

The Input component builds upon the native HTML input element and enhances it with an expanded range of field types, each associated with a specific validation pattern. You can specify the field type by utilizing the 'type' property. The Input component has access to the Form handler functions and utilities and should be used as a child in the Form component.

Input properties

Props of the native component are also available.

type
The 'type' property determines the validation pattern associated with the input element. See all available types here.
Default: text
Type: string

mask
The 'mask' property determines the masking pattern associated with the input element. Read more here.
Type: string

validation
Overrides the native validityState error messages.
Default: native validityState
Type: object

label
Label of the input field. Strongly recommended for accessibility, ensuring a more inclusive and user-friendly experience.
Type: string

classes
Classes applied to the root, input, label and error elements.
Type: { root: string; field: string; label: string; error: string; }

Example

import { Form, Input } from 'formfusion';
import './App.css';

const MyForm = () => {
  const onSubmit = (data: object) => {
    console.log('Form submitted successfully', data);
  };

  return (
    <Form onSubmit={onSubmit} className="form">
      <Input
        id="username"
        name="username"
        type="username"
        label="Username"
        required
        classes={{
          field: 'input-field',
          label: 'input-field__label',
          error: 'input-field__error-message',
        }}
        validation={{
          patternMismatch: 'Please match the requested format.',
          valueMissing: 'This field is required.',
        }}
      />
      <button type="submit">Submit</button>
    </Form>
  );
};

export default MyForm;