Form

Forms wrap several types of inputs such as TextInputs, TextAreas, RadioButtons, Checkboxes, Select dropdowns, and more. They are often used within FieldGroups or MultiStep forms.

For more information on how to use the features and props for this component, check out the developer documentation.

To learn more about configuration, visit Pega Community.

Forms should include a meaningful heading that describes the purpose of the Form, as well as actions comprised of Buttons that can support the cancellation or submission of the Form. Forms may optionally include a description that provides further detail into why the Form is necessary or how to properly submit it.

For feedback purposes, banners may be passed to the Form component. The banners will render above all other content including the heading.

In some cases, a one-column layout is not the best way to present the Form. If you have limited space, or your Form includes fields that are logically associated, having multiple columns may be ideal. While the Form component does not offer support for column-based rendering, this style can be achieved by managing the Form inputs within a Grid.

NameTypeDefaultDescription
children*ReactNodeThe Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child.
actionsReactNodeRegion for Form Actions.
bannersReactNodeRegion for Banners above the Form.
classNamestringAdditional CSS classes.
descriptionstringA description of the form to be displayed above the controls.
headingstringThe heading of the form.
refRef<HTMLFormElement>Ref forwarded to the wrapping element.

You can override the styles of the Form component, or any other form control component, by setting a custom theme on the Configuration component.

{
      •       'foreground-color': 'base.palette.foreground-color', // → base.palette.foreground-color
      •       'background-color': 'base.palette.primary-background', // → base.palette.primary-background
      •       'border-color': 'base.colors.gray.medium', // → base.colors.gray.medium
      •       'border-width': '0.0625rem',
      •       'border-radius': 0.5,
      •       padding: 'base.spacing', // → base.spacing
        •         'border-color': 'base.colors.gray.extra-dark' // → base.colors.gray.extra-dark
        •       },
        •         'border-color': 'transparent'
        •       },
        •         'border-color': 'transparent',
        •         'box-shadow': 'base.shadow.focus' // → base.shadow.focus
        •       },
        •         'background-color': 'base.colors.gray.extra-light', // → base.colors.gray.extra-light
        •         'border-color': 'base.colors.gray.light' // → base.colors.gray.light
        •       },
        •         'background-color': 'base.colors.gray.extra-light', // → base.colors.gray.extra-light
        •         'border-color': 'transparent'
        •       }
      •     }
    •   }
}