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.

Usage

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.

Columns

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.

Properties

Name	Type	Description
`children*`	`ReactNode`	The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child.
`actions`	`ReactNode`	Region for Form Actions.
`banners`	`ReactNode`	Region for Banners above the Form.
`className`	`string`	Additional CSS classes.
`description`	`string`	A description of the form to be displayed above the controls.
`heading`	`string`	The heading of the form.
`ref`	`Ref<HTMLFormElement>`	Ref forwarded to the wrapping element.

Custom theming

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

Theme properties

{      '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'
      }
    }
  }
}