Skip to main content

Custom

The custom widget allows you to easily customize your markup completely for a component. This let's you skip the work of writing a widget type definition.

caution

Do not use this widget if you intend to serialize the form.

caution

It's up to you to make sure you call the onChange() function to update the value of the form here. Also note that if you intend to submit this form as post data, then you need to ensure your form fields have proper names.

Example​

import React from "react";
import {
  createForm,
  textField,
  customWidget,
  StatefulFormView,
} from "@fab4m/fab4m";
import "@fab4m/fab4m/css/basic/basic.css";

const form = createForm({
  field: textField({
    label: "Field",
    widget: customWidget((props) => (
      <div>
        <label htmlFor={props.id}>{props.component.label}</label>
        <input
          type="text"
          id={props.id}
          value={props.value}
          onChange={(e) => props.onChange(e.target.value)}
        />
        <div>Custom text</div>
      </div>
    )),
  }),
});

export default function CustomWidgetExample() {
  return <StatefulFormView form={form} hideSubmit={true} />;
}

Compatible components​