A schema is a plain object where each key becomes a field name and each value is a builder.
- The builder defines the field type, default value, label, validation, visibility conditions and more.
SchemaValues<typeof schema>gives you the submitted values shape automatically.- Because the schema is just data, the same object can drive editing forms, wizards, readonly reviews, analytics, and even dynamic rendering.
- The practical rule of thumb: if a behavior belongs to the field itself, keep it in the builder instead of scattering it across components.
What the schema controls
| Concern | What the schema controls |
|---|---|
| Rendering | Text input, select, radio, phone, file, OTP, custom renderer, and more |
| Validation | Required rules, length/number constraints, async validators, cross-field checks |
| UX metadata | Labels, placeholders, hints, error messages... |
| Runtime conditions | Visible, required, disabled, resetFields/clear/keep on hide |
Typing tip
Use satisfies FormSchema when you want an explicit schema contract without losing the precise field typing.
InlineExample-1.tsxtsx
| 1 | import type { FormSchema } from '@runilib/react-formbridge' |
| 2 | |
| 3 | const schema = { |
| 4 | bio: field.textarea('Bio'), |
| 5 | country: field.select('Country').options(['FR', 'US']), |
| 6 | } satisfies FormSchema |
This keeps fields.bio aligned with textarea-only overrides and fields.country aligned with select-only overrides.