A form starts with a plain schema object. Keys become field names, and each builder defines the renderer, default value, validation, and UI metadata for that field.
- Web and native can share the same schema.
- The generated
fieldsmap is fully typed from the schema keys. - The generated
fieldprop is also typed from the exact field type, so text fields, textareas, or selects for example do not expose the same override surface. Form.Submitautomatically follows submit state.
web.tsxtsx
| 1 | import type { FormSchema } from '@runilib/react-formbridge' |
| 2 | import { field, useFormBridge } from '@runilib/react-formbridge' |
| 3 | |
| 4 | const schema = { |
| 5 | fullName: field.text('Full name').required().trim(), |
| 6 | email: field.email('Email').required(), |
| 7 | password: field.password('Password').required().strong(), |
| 8 | terms: field.checkbox('Accept terms').mustBeTrue(), |
| 9 | } satisfies FormSchema |
| 10 | |
| 11 | export function RegistrationForm() { |
| 12 | const { Form, fields, state } = useFormBridge(schema, { validateOn: 'onTouched' }) |
| 13 | |
| 14 | return ( |
| 15 | <Form onSubmit={save}> |
| 16 | <fields.fullName /> |
| 17 | <fields.email /> |
| 18 | <fields.password /> |
| 19 | <fields.terms /> |
| 20 | <Form.Submit disabled={!state.isValid}>Create account</Form.Submit> |
| 21 | </Form> |
| 22 | ) |
| 23 | } |