Components
FormRenderer
Headless form renderer
FormRenderer
A headless component for rendering forms created with the Form Builder plugin. Uses native HTML elements and is fully customizable via render functions.
Basic Usage
import { FormRenderer, toSubmissionData } from '@01.software/sdk/components'
function ContactForm({ form }) {
const handleSubmit = async (values) => {
await client.from('form-submissions').create({
form: form.id,
submissionData: toSubmissionData(values),
})
}
return <FormRenderer form={form} onSubmit={handleSubmit} />
}Props
| Prop | Type | Description |
|---|---|---|
form | Form | Form Builder form object (required) |
onSubmit | (data: FormValues) => void | Promise<void> | Submit handler (required) |
className | string | <form> CSS class |
fieldClassName | string | Field wrapper CSS class |
buttonClassName | string | Submit button CSS class |
renderField | (field, context, defaultRender) => ReactElement | Custom field renderer |
renderMessage | (data: RichTextData) => ReactElement | Message block renderer |
renderButton | (props: { isSubmitting, label }) => ReactElement | Custom button renderer |
Supported Field Types
text, email, number, textarea, checkbox, select, country, state, message
Custom Field Rendering
<FormRenderer
form={form}
onSubmit={handleSubmit}
renderField={(field, context, defaultRender) => {
if (field.blockType === 'email') {
return (
<div className="custom-email">
<input
type="email"
value={String(context.value)}
onChange={(e) => context.onChange(e.target.value)}
/>
</div>
)
}
return defaultRender
}}
/>Exports
| Export | Description |
|---|---|
FormValues | Record<string, string | number | boolean> |
FormField | Form field union type |
InputField | Input field type (excludes message) |
SubmissionData | { field: string; value: string }[] |
FieldRenderContext | { value, onChange } |
toSubmissionData(values) | Converts FormValues → SubmissionData |