Skip to main content

Component Widgets

A component widget implements the UI for the component.

The widget is part of the component definition, and you can select which widget to use for each component you add.

All components have a default widget that is used if you don't specify which widget to use.

Specifying a widget for a component​

A widget can be specified when defining the component in the form, in the example below we use the select widget for the text field.

import React from "react";
import {
  createForm,
  textField,
  selectWidget,
  StatefulFormView,
} from "@fab4m/fab4m";

const form = createForm({
  textSelect: textField({
    label: "Select",
    widget: selectWidget([["One", "one"], ["Two", "two"], "three"]),
  }),
});

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

Widgets for multiple components​

There are widgets that define the UI for how to collect multiple values as well. You can select which widget to use by setting the multipleWidget setting on your component:

import React from "react";
import {
  createForm,
  textField,
  StatefulFormView,
  tagsWidget,
} from "@fab4m/fab4m";

const form = createForm({
  tags: textField({
    label: "Tags",
    multiple: true,
    multipleWidget: tagsWidget(),
  }),
});

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

Check the widget library​

Fab4m comes with several widgets, check them out in the Widget reference. Also, check the extension guide on how to create your own widgets.