FormFusion: Easy form handling, validation & more

Textarea

The Textarea component is built upon the native HTML textarea element and it should be used as a child within the Form component to provide access to the Form handler functions and utilities.

Textarea properties

Props of the native component are also available.

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

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

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

Example

import { Form, Textarea } from "formfusion";
import "./App.css";

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

  return (
    <Form onSubmit={onSubmit} className="form">
      <Textarea
        id="message"
        name="message"
        label="Enter your message"
        required
        classes={{
          field: "textarea",
          label: "textarea__label",
          error: "textarea__error-message"
        }}
        validation={{
          patternMismatch: "Please match the requested format.",
          valueMissing: "This field is required."
        }}
      />
      <button type="submit">Submit</button>
    </Form>
  );
};

export default MyForm;