Rendering Forms
How to render forms and their components.
rilaykit/react (or @rilaykit/forms/react) exports the components that render a built form using the components registered on your ril instance.
The <Form> Component
The root component. Pass a form builder or built configuration via of — builders are auto-built.
import { Form } from 'rilaykit/react';
import { userForm } from '@/config/user-form';
function UserFormPage() {
return (
<Form
of={userForm}
defaults={{ firstName: 'Jane' }}
onSubmit={(data) => console.log('Form submitted:', data)}
>
<Form.Body />
<Form.Submit>Save</Form.Submit>
</Form>
);
}<Form> renders a native <form> element. Submit always validates; onSubmit is called only when the form is valid, and errored fields are marked touched so their errors show and clear live.
Props
| Prop | Description |
|---|---|
of | A built FormConfiguration or a form builder (auto-built). |
defaults | Initial values keyed by field id. Live: changing it re-seeds untouched fields; edited fields keep their value. |
onSubmit(data) | Receives the values when submission passes validation. |
onFieldChange(fieldId, value, formData) | Fires on every value change. |
onFieldsRemove(fieldIds, formData) | Fires when ids leave the store (a repeatable row was removed). |
instanceId | Distinguishes two mounts of the same config; changing it resets the store. |
conditionValues | Read-only external values that field conditions may reference (e.g. another step's data). Never stored or submitted. |
className | Passed to the underlying <form>. |
Subcomponents are also exported standalone: FormBody, FormField, FormSubmit, FormList.
Layout Components
<Form.Body>
Renders every visible row: regular rows as a div of fields, repeatables as <Form.List>. Pass a render prop to lay rows out yourself:
<Form.Body>
{({ rows }) => rows.map((row) => /* your layout */)}
</Form.Body><Form.Field> for Custom Layouts
Place any field anywhere; <Form.Body>'s row structure is not used, the layout is yours.
<Form of={userForm} onSubmit={save}>
<aside>
<Form.Field id="profilePicture" />
</aside>
<main>
<Form.Field id="firstName" />
<Form.Field id="lastName" />
<Form.Field id="bio" />
</main>
<Form.Submit>Save changes</Form.Submit>
</Form><Form.Submit>
Renders a <button type="submit">, disabled while submitting. children can be a node or a render function:
<Form.Submit>
{({ submitting, submit }) => (
<button onClick={submit} disabled={submitting}>
{submitting ? 'Saving…' : 'Save profile'}
</button>
)}
</Form.Submit>For rendering repeatable rows with <Form.List>, see Repeatable Fields.