formfusion NPM Version
LearnBlogPlayground

Textarea

Textarea - Optimised and fully customisable React component

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

#

  • 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, 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;