Solid
Build typed Solid forms with reactive primitives and components.
Oxform Solid
Try the Solid playground for an interactive account form with source viewing.
@oxform/solid connects the core form API to Solid's reactivity. Create a form inside a component, connect fields to controls, and read reactive getters in JSX.
Both adapters ship in one package. Choose the entry matching your application's Solid version:
| Solid version | Import | Setup |
|---|---|---|
^1.9.0 | @oxform/solid | Install below. |
2.0.0-rc.19 | @oxform/solid/v2 | Follow the Solid 2 guide. |
Install
For Solid 1, install Solid ^1.9.0 and a Standard Schema validator, such as Zod. The examples on the shared API pages use this entry.
pnpm add @oxform/solid solid-js@^1.9.0 zodFirst Form
import { , } from '@oxform/solid';
import { } from 'solid-js';
import { } from 'zod';
const = .({ : .() });
export function () {
const = ({
,
: { : '' },
: { : { : { : } } },
});
const = ({ , : 'email' });
const = .( => {
.(.);
});
return (
<
={ => {
.();
void ();
}}
>
< ='signup-email'>Email</>
< ='signup-email' ='email' {....} />
< ={...}>{ => <>{..}</>}</>
< ='submit' ={..}>
Sign up
</>
< ='button' ={() => .()}>
Reset
</>
</>
);
}The schema infers values and field paths. Input props use onInput to write text during typing. Configured change validation updates email.state.issues; form.submit validates again before calling the success callback.
Choose an API
| Task | API |
|---|---|
| Create a form | createForm |
| Connect a control | createField or Field |
| Use imperative field methods | createFieldApi |
| Manage a dynamic list | createArrayField or ArrayField |
| Observe a selected value | createSubscribe or Subscribe |
| Read aggregate form status | form.status or createFormStatus |
| Run a callback on changes | createFormEffect |
Solid 2
Install the v2 entry and account for flush timing and effects.
Reactivity and lifecycle
Read getters, switch field paths, and release subscriptions.
Validation
Configure errors, warnings, and asynchronous checks.
TypeScript
Infer paths, values, and issue levels from a schema.
API reference
Browse every Solid primitive and component.
Runnable Example
The repository's examples/solid workspace includes validation feedback, checkbox handling, keyed array rows, subscriptions, effects, submission, and reset.
pnpm install
pnpm --dir examples/solid run devFor Solid 2, run pnpm --dir examples/solid-v2 run dev instead.