createFieldCopy Anchor Link

createField({ form, name }) returns a stable field API with reactive id, value, state, and props. The path and its value type follow the form schema. Options accept an object, reactive getters, or an accessor. Changing form or name rebinds retained methods, subscriptions, and owned refs.

PropertiesCopy Anchor Link

state.issues contains only this path's grouped issues. issues({ nested: true }) reads descendants imperatively. Read field status through state.status.

Input PropsCopy Anchor Link

Spread props directly in JSX for text inputs, textareas, and single-value selects. onInput writes text during typing and triggers configured change validation. Solid's onChange uses native change-event timing.

Checkboxes, numbers, files, and custom controls need explicit conversion. For a checkbox:

import { createField, createForm } from '@oxform/solid';
import { z } from 'zod';

function Preferences() {
  const form = createForm({ schema: z.object({ enabled: z.boolean() }), defaultValues: { enabled: false } });
  const enabled = createField({ form, name: 'enabled' });

  return (
    <label>
      <input
        type='checkbox'
        checked={enabled.value}
        ref={enabled.register}
        onChange={event => enabled.change(event.currentTarget.checked)}
        onBlur={() => enabled.blur()}
        onFocus={() => enabled.focus()}
      />
      Receive updates
    </label>
  );
}

MethodsCopy Anchor Link

Change options should.dirty: false and should.touch: false preserve existing flags. should.validate controls the matching event; by default it runs when configured. Change, focus, and blur return before asynchronous validation finishes. Await form.validate for completion.

Issue mode replace replaces every bucket, including omitted levels. append adds entries. keep preserves all buckets if any existing bucket contains an issue. Later validation follows the event replacement rules.

Field reset accepts a non-nullish value override. The current core API accepts status and keep in its type but does not apply those field reset options. Use form-level preservation when needed.

createFieldApiCopy Anchor Link

createFieldApi(options) provides the same imperative field operations, dynamic binding, and owned ref cleanup. It adds no reactive field state or input props. Observe a selected slice explicitly:

import { createFieldApi, createForm, createSubscribe } from '@oxform/solid';
import { z } from 'zod';

function EmailPreview() {
  const form = createForm({ schema: z.object({ email: z.string() }), defaultValues: { email: '' } });
  const email = createFieldApi({ form, name: 'email' });
  const value = createSubscribe(email, state => state.value);
  return <output>{value()}</output>;
}

FieldCopy Anchor Link

Accepts form, name, and a render function receiving the full createField return value. It adds no DOM wrapper. Dynamic JSX props track changes to the binding.

import { Field, createForm } from '@oxform/solid';
import { z } from 'zod';

function EmailInput() {
  const form = createForm({ schema: z.object({ email: z.string() }), defaultValues: { email: '' } });
  return (
    <Field form={form} name='email'>
      {field => <input aria-label='Email' {...field.props} />}
    </Field>
  );
}

See Lifecycle for cleanup and ref ownership.

TypesCopy Anchor Link