CoreForm Props Reference
CoreForm Props Reference
The <CoreForm /> component from @kineticdata/react is the primary way to render and interact with Kinetic Platform forms in your front-end application. It supports a wide range of props that enable deep customization of behavior, layout, and data loading.
Basic Usage
import { CoreForm } from '@kineticdata/react'
const FeedbackForm = ({ kappSlug }) => (
<CoreForm
kapp={kappSlug}
form="feedback-form"
onCompleted={handleSubmit}
/>
);
If you do not include an
onCompletedprop (e.g.,onCompleted={handleSubmit}), the form will not forward or complete its submission flow. Be sure to define this callback to handle post-submission behavior like navigation or confirmation messages.
Before using CoreForm, make sure you've completed the Your React Library Setup.
Props
These are all the available props for the CoreForm component from @kineticdata/react.
Not seeing a prop you've used before?
It might be deprecated. Use
componentsfor customization going forward.
| Prop | Type | Description |
|---|---|---|
globals | () => Promise | Promise | Code to load before the form loads. This is typically used to load global libraries (such as lodash or moment) that can then be used in events of the Kinetic form builder. The globals prop can also be passed to the KienticLib component instead of being passed to every CoreForm component. |
submission | string | If you want to load an existing form submission, provide its ID here. |
form | string | Slug of the form to load if the submission ID is not provided. |
kapp | string | Slug of the Kapp that contains the form defined by form. |
values | { [valueName: string]\: string } | Map of field values to pass to the form. |
review | boolean | string | Boolean determining if the form should be opened in review mode, or a string matching a page name to open the form in review mode to a specific page. |
onUnauthorized | () => null | Function to run when a 401 error occurs. |
onForbidden | () => null | Function to run when 403 error occurs. |
onNotFound | () => null | Function to run when 404 error occurs. |
onError | () => null | Function that will execute when the form returns any error. |
onLoaded | () => null | Function that is called after the form is loaded. |
onCreated | () => null | Called after a new submission is successfully created. |
onUpdated | () => null | Called after an existing submission is updated. |
onCompleted | () => null | Function that will execute when a submission is submitted. |
originId | string | The ID of the originating submission. |
parentId | string | The ID of the parent submission. |
components | object | Component overrides map. |
components.Pending | ReactElement() | Component to display when the form is loading. |
components.Unauthorized | ReactElement() | Component to display when the form returns a 401 error. |
components.Forbidden | ReactElement() | Component to display when the form returns a 403 error. |
components.NotFound | ReactElement() | Component to display when the form returns a 404 error. |
components.Unexpected | ReactElement | Component to display when the form returns any other error. |
components.Layout | ReactElement() | Component used to display the entire content of the CoreForm. |
reviewPaginationControlComponent | ReactElement() | Component used to display pagination when the form is in review mode and has multiple displayable pages. |
Next Up
Now that you're familiar with the available props for <CoreForm />, you’re ready to start customizing your form experiences with confidence.
- Looking to override default layouts, errors, or loaders? Head to Overriding Default Fields.
- Ready to work with data? Check out Querying and Displaying Form Submissions.
- Want to see
CoreFormin action? Visit Integrating Forms into Your Portal UI.
If you’re unsure about a prop or encounter unexpected behavior, refer to the latest @kineticdata/react package documentation or reach out to the platform team for guidance.
Updated about 1 month ago