{field.label}: {value}
,\n number: ({ field, value }) =>{field.label}: {value}
,\n boolean: ({ field, value }) =>{field.label}: {value ? 'Yes' : 'No'}
,\n date: ({ field, value }) =>{field.label}: {value}
,\n select: ({ field, value, options }) => (\n{field.label}: {options.find(o => o.value === value)?.label}
\n ),\n array: ({ field, children }) =>{field.label}: {value?.name}
,\n section: ({ section, children }) => (\n \n ),\n}\n\nconst ReadOnlyForm: FC = () => {\n return (\n \n )\n}\n```\n\n### Using FormEditor (Editable)\n\nUse `FormEditor` when users need to fill in or edit a form. It provides per-field `onChange` handlers and fires a callback on every change with the updated `FormDocument` JSON and current validation result.\n\n```tsx\nimport { useState, type FC } from 'react'\nimport { Form, FormEditor } from '@bluprynt/forms-viewer'\nimport type { EditorComponentMap, FormDocument, FormValidationResult } from '@bluprynt/forms-viewer'\n\nconst components: EditorComponentMap = {\n string: ({ field, value, onChange }) => (\n onChange(e.target.value)} />\n ),\n number: ({ field, value, onChange }) => (\n onChange(Number(e.target.value))} />\n ),\n boolean: ({ field, value, onChange }) => (\n onChange(e.target.checked)} />\n ),\n date: ({ field, value, onChange }) => (\n onChange(e.target.value)} />\n ),\n select: ({ field, value, options, onChange }) => (\n \n ),\n array: ({ field, children, onAddItem }) => (\n