correct-apricot

Use form Composition in solid js

Is there a way to use the form composition APIs in solid js yet? The feature doesn't seem to be mentioned in the solid docs + the APIs are not exported from the package that I can see. I think Tanstack Form seems really amazing! The composition seems like the true killer feature of this library and I would really love to use it in Solid 💙

4 Replies

conscious-sapphire•7mo ago

We'll be porting it to Solid very very soon ☺️

correct-apricot•5mo ago

Hello, checking in to confirm this is still a work in progress? Looks like I can pass the form down to the component pretty easily, but I'm not sure what the types should be.

function Example({ form }) {
  return (
    <form.Field name="example">
      {(f) => {
        return (
          <div>
            <p class="mb-0">Example</p>
            <Toggle id="example" onToggle={() => f().handleChange(!f().state.value)} />
          </div>
        );
      }}
    </form.Field>
  );
}

function Parent() {
  const myForm = createForm(() => ({
    defaultValues: {
      example: boolean,
    } as MyType,
    onSubmit: async ({ value }) => {
      alert(JSON.stringify(value, null, 2));
    },
  }));
  return (
    <form>
      <Example form={myForm} />
    </form>
  );
}

function Example({ form }) {
  return (
    <form.Field name="example">
      {(f) => {
        return (
          <div>
            <p class="mb-0">Example</p>
            <Toggle id="example" onToggle={() => f().handleChange(!f().state.value)} />
          </div>
        );
      }}
    </form.Field>
  );
}

function Parent() {
  const myForm = createForm(() => ({
    defaultValues: {
      example: boolean,
    } as MyType,
    onSubmit: async ({ value }) => {
      alert(JSON.stringify(value, null, 2));
    },
  }));
  return (
    <form>
      <Example form={myForm} />
    </form>
  );
}

conscious-sapphire•5mo ago

Yes, sorry! https://github.com/TanStack/form/pull/1453

GitHub

[Solid.js] feat: add withForm and createAppForm APIs by crutchcorn ...

TODOs Write docs Receive code review from community to validate if useFieldContext should return a signal or stay as-is

conscious-sapphire•5mo ago

This should be merged once I get to Aadit's review comments and I have a chance to write docs

Gaming

Programming

Use form Composition in solid js

Did you find this page helpful?