Static content field

This field can be used to static content in a form. It has no action handlers.

If static text is sufficient, you can simply use the text prop to pass the static text to display, and the textElement prop to specify what element the text should be wrapped in.

textElementClass can also be set to a string of class names to be added to the text element.

import ChangesetWebform from 'react-changeset-webforms/src/components/ChangesetWebform.jsx';

const formSchema = {
  formSettings: {
    formName: 'staticContentExample1',
    hideSubmitButton: true,
  },
  fields: [
    {
      fieldId: 'staticContent',
      fieldType: 'staticContent',
      text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero similique, repellat fuga ad enim eveniet exercitationem earum et commodi necessitatibus doloremque saepe veniam consequuntur maxime a soluta ea perferendis sit.',
      textElement: 'p',
      textElementClass: 'bg-success text-white p-2 rounded',
    },
  ],
};

export default function StaticContentExampleOne() {
  return <ChangesetWebform formSchema={formSchema} />;
}

Static content field with custom content component

import ChangesetWebform from 'react-changeset-webforms/src/components/ChangesetWebform.jsx';
import ComponentForStaticContentField from '../forms/ComponentForStaticContentField.jsx';

const formSchema = {
  formSettings: {
    formName: 'staticContentExample2',
    hideSubmitButton: true,
  },
  fields: [
    {
      fieldId: 'staticContent',
      fieldType: 'staticContent',
      contentComponent: {
        componentClass: ComponentForStaticContentField,
        props: {
          info: 'This text was passed to the label component dynamically for this option, via the contentComponent.props object',
        },
      },
    },
  ],
};

export default function StaticContentExampleTwo() {
  return <ChangesetWebform formSchema={formSchema} />;
}

Alternatively, you can pass `

      fieldType: 'staticContent',
      text: null,
      textElement: 'h3 ', // TODO check this
      contentComponent: null, // Object with { componentClass, props }.
      // `componentClass` is the imported class of the component to show on the add clone button.
      // `props` can be included to pass state or data to the component, accessible as {{@props}}.
      // `@changesetWebform and @formField are passed to the component.

The above props are in addition to the generic field props shown with their default values below.

    validationRules: [], // Array of objects defining validation rules. See "Validation".
    validatesOn: ['submit', 'pushErrors'], // Array of strings, specifing the names of events which should triggger validation.
    showValidationWhenFocussed: null, // Boolean - unless this is true, validation colours, icons and messages will be omitted for as long as the "focussed" prop of a field is true. The build in input and textarea fields set focussed to true when the user focuesses the element.
    omitted: false, // Boolean - or object - if true, the field is omitted and also ignored when validating or submitting the form. Can also be an object which defines rules for dynamic omission/inclusion. See /docs/hiding-and-showing-fields.
    defaultValue: null, // Any - auto set the changeset property for the field to this value when the ChangesetWebform component is rendered and the changeset is created. This value will be overridden by a corresponding property in the data object that is passed to the ChangesetWebform component.
    labelComponent: null, // Object with { componentClass, props }.
    // If set, fieldLabel becomes null.
    // `componentClass` is the imported class of the component to show inside the field label element.
    // `props` can be included to pass state or data to the component, accessible as {{@props}}.
    // `@changesetWebform, and @formField are passed to the component.
    labelMarkdown: null, // String - a markdown string to render as HTML within the label element.
    hideLabel: null, // Boolean - Hide the label from the user
    disabled: false, // Boolean - disable the field, but do not hide it. It will still be validated [TODO check] and included when the form is submitted
    resetWhenOmitted: true, // Boolean - reset the field value and validation when the field is omitted from the form.
    attrsFromConfig: {
      classNames: {}, // Object - keys can correspond to those in the classNames settings. See /docs/configure-classnames
    },
    cloneActionsPosition: 'fieldActions', // String - where to place the remove clone button in relation to the cloned field. Can be [TODO]
    includeLabelForAttr: false, // Boolean - if true, the label element will have a 'for' attribute that matches the input element's 'id' attribute.
    isFieldset: false, // Boolean - if true, the field options are wrapped in a fieldset element, and the field label is wrapped in a legend element.
    requiresAriaLabelledBy: false, // Boolean - if true, the field will have an aria-labelledby attribute that points to the field label. This is not required if the field uses semantic element/s such as inputs or textareas, and the "for" attribute of the label correctly points to the semantic element/s.