Guide
Concepts
The core ideas behind Oxform React forms.
Concepts
Oxform React keeps the form API separate from rendered controls. You create a form once, then connect fields and subscriptions to the parts of the UI that need them.
Form
The form owns values, field state, validation, and submit lifecycle.
import { } from '@oxform/react';
import { } from 'zod';
const = .({
: .(),
});
function () {
const = ({ , : { : '' } });
return (
< ='button' ={() => .()}>
Reset
</>
);
}Field
A field reads and writes one path in the form.
import { , } from '@oxform/react';
import { } from 'zod';
const = .({
: .(),
});
function () {
const = ({ , : { : '' } });
return (
< ={} ='email'>
{ => < {....} />}
</>
);
}Subscription
A subscription reads a selected piece of state. Use it for submit buttons, status badges, counters, and derived UI.
import { , } from '@oxform/react';
import { } from 'zod';
const = .({
: .(),
});
function () {
const = ({ , : { : '' } });
return (
< ={} ={ => ..}>
{ => (
< ='submit' ={}>
Submit
</>
)}
</>
);
}