# `@playfast/forms-react`
**Typed JSX mapping for [`@playfast/forms`](https://www.npmjs.com/package/@playfast/forms) — turn a form view into scoped field/array/variant helpers, no bundled widgets.**
---
`FormUi.make` wires a [`@playfast/forms`](https://www.npmjs.com/package/@playfast/forms) view (provided in a
[`@playfast/reform`](https://www.npmjs.com/package/@playfast/reform) contract's `form` prop) to your own React
components. It owns no state and ships no DOM widgets — it maps the typed schema to JSX so your layout cannot
drift from it.
```tsx
import { FormUi } from '@playfast/reform-forms-react'
export const CheckoutUi = FormUi.make(
CheckoutContract,
CheckoutForm,
({ field, array, variant, form }) => (
{field('email').as(EmailInput, { label: 'Email' })}
{array('items', ({ items, append }) => (
{items.map((item) => (
{item.field('name').as(TextInput)}
))}
append()}>Add
))}
{variant('payment', {
Card: ({ field }) => field('cardNumber').as(CardNumberInput),
Paypal: ({ field }) => field('email').as(EmailInput),
})}
Submit
),
)
```
The render callback receives scoped helpers (`field` / `array` / `variant`), the underlying `form` view, and the
contract `props`. `field(path).as(Component, props?)` returns a `ReactNode` whose component gets a typed
`field: FieldBinding` prop. `array` and `variant` scopes expose the same helpers relative to that scope.
Full API: [playbook/api.doc.md](./playbook/api.doc.md). Pairs with core
[`@playfast/reform`](https://www.npmjs.com/package/@playfast/reform), form state
[`@playfast/forms`](https://www.npmjs.com/package/@playfast/forms), and the React host
[`@playfast/reform-react`](https://www.npmjs.com/package/@playfast/reform-react).
## License
MIT