formfusion NPM Version
LearnBlogPlayground

Input

Input - Optimised and fully customisable React component

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

#

  • helperText

  • A small helper text shown bellow of the input field. Recommended for additional information about the field helpful for the user.

  • Type: string

#

  • classes

  • Classes applied to the root, input, label and error elements.

  • Type: { root: string; field: string; label: string; error: string; }

#

  • hideArrows

  • show/hide the default arrows in an input type 'number'

  • Type: boolean

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;