TanStack Form

A thin integration layer that wires TanStack Form to Pindoba controls. It builds on the presentational Field wrapper — Field owns the label, description, tooltip, error region, accessibility wiring, and validation-driven tone color; this block adds the form state, validation, and value binding on top.

It ships ready-made <FormInput>, <FormTextarea>, <FormSelect>, and <FormCheckbox> wrappers for the common controls, a generic <FormField> escape hatch for everything else, and a <FormSubmit> button that disables while a submission is in flight (and, opt-in, while the form is invalid). The package re-exports TanStack’s createForm, so you import everything from one place.

Available for Svelte, React, Solid, and Astro. All build on the same agnostic core (@pindoba/core-tanstack-form) over @tanstack/form-core; the wrappers and error/tone behavior are identical.

They differ only in how you create the form, because TanStack Form is client-reactive and Astro has no runtime reactivity:

Svelte — createForm(...) (re-exported from the block) and pass the instance to each wrapper via form={...}.
React — useForm(...) (re-exported from the block) and pass the instance to each wrapper via form={...}.
Solid — createForm(...) (alias useForm), exported by the block. It is a small Solid 2 adapter over @tanstack/form-core (@tanstack/solid-form targets Solid 1); pass the instance to each wrapper via form={...}.
Astro — wrap the controls in <pindoba-form> and create the form in a client <script> (new FormApi(...)), then assign it to the element’s .form property. Validators and onSubmit aren’t serializable, so the form definition lives in script, not markup. The custom element wires every field via bindForm and re-binds across view transitions automatically. (Prefer the lower-level bindForm(rootEl, form) directly if you’re not using the element.)

Quick start

createForm / new FormApi accept Standard Schema validators natively — Zod 3.24+, Valibot, and ArkType all work without any adapter. Pass one under validators.onChange (or onBlur / onSubmit) and the matching field messages flow straight into each control’s error region. Toggle the demo’s Code view for the full source — including the Astro client <script> that builds the form.

PreviewCode

---
// GENERATED from packages/demos/tanstack-form/basic.demo.tsx — edit the source, not this file.
import { FormInput, FormSubmit } from "@pindoba/astro-tanstack-form";
import { stack } from "@pindoba/styled-system/patterns";

const submitted = null as string | null;
---

<form data-ir-root="tanstack-form/basic" data-ir="1">
  <div class={stack({ gap: "md", direction: "column" })}>
    <FormInput
      name="name"
      label="Name"
      autocomplete="name"
      required
      data-ir="2"
    />
    <FormInput
      name="email"
      label="Email"
      type="email"
      autocomplete="email"
      required
      labelTooltip="We email your receipt here."
      data-ir="3"
    />
    <FormSubmit data-ir="4">Create account</FormSubmit>
    <!--ir:5-->
    {submitted && (
      <p>
        Submitted: <!--ir:6-->
        {submitted}
        <!--/ir-->
      </p>
    )}
    <!--/ir-->
  </div>
</form>

<script>
  import { hydrate } from "./_client/basic.ts";

  document
    .querySelectorAll('[data-ir-root="tanstack-form/basic"]')
    .forEach((root) => hydrate([root]));
</script>

// GENERATED from packages/demos/tanstack-form/basic.demo.tsx — edit the source, not this file.
import { useState } from "react";
import {
  FormInput,
  FormSubmit,
  useForm,
  useFocusInvalidOnSubmit,
} from "@pindoba/react-tanstack-form";
import { stack } from "@pindoba/styled-system/patterns";
import { z } from "zod";

const schema = z.object({
  name: z.string().min(2, "Use at least 2 characters."),
  email: z.string().email("Enter a valid email address."),
});
export default function BasicDemo() {
  const [submitted, setSubmitted] = useState(null as string | null);
  const form = useForm({
    defaultValues: { name: "", email: "" },
    validators: { onChange: schema },
    onSubmit: async ({ value }) => {
      setSubmitted(JSON.stringify(value));
    },
  });
  const formRef = useFocusInvalidOnSubmit(form);
  return (
    <form
      ref={formRef}
      onSubmit={(event) => {
        event.preventDefault();
        void form.handleSubmit();
      }}
    >
      <div className={stack({ gap: "md", direction: "column" })}>
        <FormInput
          form={form}
          name="name"
          label="Name"
          autoComplete="name"
          required
        />
        <FormInput
          form={form}
          name="email"
          label="Email"
          type="email"
          autoComplete="email"
          required
          labelTooltip="We email your receipt here."
        />
        <FormSubmit form={form}>Create account</FormSubmit>
        {submitted && <p>Submitted: {submitted}</p>}
      </div>
    </form>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/tanstack-form/basic.demo.tsx — edit the source, not this file.
  import {
    FormInput,
    FormSubmit,
    createForm,
    focusInvalidOnSubmit,
  } from "@pindoba/svelte-tanstack-form";
  import { stack } from "@pindoba/styled-system/patterns";
  import { z } from "zod";

  const schema = z.object({
    name: z.string().min(2, "Use at least 2 characters."),
    email: z.string().email("Enter a valid email address."),
  });

  let submitted = $state(null as string | null);

  const form = createForm(() => ({
    defaultValues: { name: "", email: "" },
    validators: { onChange: schema },
    onSubmit: async ({ value }) => {
      submitted = JSON.stringify(value);
    },
  }));
</script>

<form
  {@attach focusInvalidOnSubmit(form)}
  onsubmit={(event) => {
    event.preventDefault();
    void form.handleSubmit();
  }}
>
  <div class={stack({ gap: "md", direction: "column" })}>
    <FormInput {form} name="name" label="Name" autocomplete="name" required
    ></FormInput>
    <FormInput
      {form}
      name="email"
      label="Email"
      type="email"
      autocomplete="email"
      required
      labelTooltip="We email your receipt here."
    ></FormInput>
    <FormSubmit {form}>Create account</FormSubmit>
    {#if submitted}
      <p>
        Submitted: {submitted}
      </p>
    {/if}
  </div>
</form>

// GENERATED from packages/demos/tanstack-form/basic.demo.tsx — edit the source, not this file.
import { createSignal, Show } from "solid-js";
import {
  FormInput,
  FormSubmit,
  createForm,
  useFocusInvalidOnSubmit,
} from "@pindoba/solid-tanstack-form";
import { stack } from "@pindoba/styled-system/patterns";
import { z } from "zod";

const schema = z.object({
  name: z.string().min(2, "Use at least 2 characters."),
  email: z.string().email("Enter a valid email address."),
});
export default function BasicDemo() {
  const [submitted, setSubmitted] = createSignal(null as string | null);
  const form = createForm({
    defaultValues: { name: "", email: "" },
    validators: { onChange: schema },
    onSubmit: async ({ value }) => {
      setSubmitted(JSON.stringify(value));
    },
  });
  const formRef = useFocusInvalidOnSubmit(form);
  return (
    <form
      ref={formRef}
      onSubmit={(event) => {
        event.preventDefault();
        void form.handleSubmit();
      }}
    >
      <div class={stack({ gap: "md", direction: "column" })}>
        <FormInput
          form={form}
          name="name"
          label="Name"
          autocomplete="name"
          required
        />
        <FormInput
          form={form}
          name="email"
          label="Email"
          type="email"
          autocomplete="email"
          required
          labelTooltip="We email your receipt here."
        />
        <FormSubmit form={form}>Create account</FormSubmit>
        <Show when={submitted()}>
          <p>Submitted: {submitted()}</p>
        </Show>
      </div>
    </form>
  );
}

Control wrappers

<FormInput>, <FormTextarea>, <FormSelect>, and <FormCheckbox> each bind a control to a form field and forward every Field prop (label, description, required, labelTooltip, size, orientation, tone, errorMode, …). Errors flip the control to the danger tone color automatically.

PreviewCode

---
// GENERATED from packages/demos/tanstack-form/mixed-controls.demo.tsx — edit the source, not this file.
import {
  FormCheckbox,
  FormInput,
  FormSelect,
  FormSubmit,
} from "@pindoba/astro-tanstack-form";
import { stack } from "@pindoba/styled-system/patterns";

const countries = [
  { id: "br", label: "Brazil" },
  { id: "us", label: "United States" },
  { id: "pt", label: "Portugal" },
];

const submitted = null as string | null;
---

<form data-ir-root="tanstack-form/mixed-controls" data-ir="1">
  <div class={stack({ gap: "md", direction: "column" })}>
    <FormInput name="fullName" label="Full name" required data-ir="2" />
    <FormSelect
      name="country"
      label="Country"
      items={countries}
      placeholder="Select a country"
      required
      data-ir="3"
    />
    <FormCheckbox
      name="terms"
      label="Agreement"
      errorMode="submitted"
      data-ir="4"
    >
      I accept the terms of service
    </FormCheckbox>
    <FormSubmit data-ir="5">Continue</FormSubmit>
    <!--ir:6-->
    {submitted && (
      <p>
        Submitted: <!--ir:7-->
        {submitted}
        <!--/ir-->
      </p>
    )}
    <!--/ir-->
  </div>
</form>

<script>
  import { hydrate } from "./_client/mixed-controls.ts";

  document
    .querySelectorAll('[data-ir-root="tanstack-form/mixed-controls"]')
    .forEach((root) => hydrate([root]));
</script>

// GENERATED from packages/demos/tanstack-form/mixed-controls.demo.tsx — edit the source, not this file.
import { useState } from "react";
import {
  FormCheckbox,
  FormInput,
  FormSelect,
  FormSubmit,
  useForm,
  useFocusInvalidOnSubmit,
} from "@pindoba/react-tanstack-form";
import { stack } from "@pindoba/styled-system/patterns";
import { z } from "zod";

const countries = [
  { id: "br", label: "Brazil" },
  { id: "us", label: "United States" },
  { id: "pt", label: "Portugal" },
];
const schema = z.object({
  fullName: z.string().min(2, "Use at least 2 characters."),
  country: z.string().min(1, "Pick a country."),
  terms: z.literal(true, { message: "You must accept the terms." }),
});
export default function MixedControlsDemo() {
  const [submitted, setSubmitted] = useState(null as string | null);
  const form = useForm({
    defaultValues: { fullName: "", country: "", terms: false },
    validators: { onChange: schema },
    onSubmit: async ({ value }) => {
      setSubmitted(JSON.stringify(value));
    },
  });
  const formRef = useFocusInvalidOnSubmit(form);
  return (
    <form
      ref={formRef}
      onSubmit={(event) => {
        event.preventDefault();
        void form.handleSubmit();
      }}
    >
      <div className={stack({ gap: "md", direction: "column" })}>
        <FormInput form={form} name="fullName" label="Full name" required />
        <FormSelect
          form={form}
          name="country"
          label="Country"
          items={countries}
          placeholder="Select a country"
          required
        />
        <FormCheckbox
          form={form}
          name="terms"
          label="Agreement"
          errorMode="submitted"
        >
          I accept the terms of service
        </FormCheckbox>
        <FormSubmit form={form}>Continue</FormSubmit>
        {submitted && <p>Submitted: {submitted}</p>}
      </div>
    </form>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/tanstack-form/mixed-controls.demo.tsx — edit the source, not this file.
  import {
    FormCheckbox,
    FormInput,
    FormSelect,
    FormSubmit,
    createForm,
    focusInvalidOnSubmit,
  } from "@pindoba/svelte-tanstack-form";
  import { stack } from "@pindoba/styled-system/patterns";
  import { z } from "zod";

  const countries = [
    { id: "br", label: "Brazil" },
    { id: "us", label: "United States" },
    { id: "pt", label: "Portugal" },
  ];
  const schema = z.object({
    fullName: z.string().min(2, "Use at least 2 characters."),
    country: z.string().min(1, "Pick a country."),
    terms: z.literal(true, { message: "You must accept the terms." }),
  });

  let submitted = $state(null as string | null);

  const form = createForm(() => ({
    defaultValues: { fullName: "", country: "", terms: false },
    validators: { onChange: schema },
    onSubmit: async ({ value }) => {
      submitted = JSON.stringify(value);
    },
  }));
</script>

<form
  {@attach focusInvalidOnSubmit(form)}
  onsubmit={(event) => {
    event.preventDefault();
    void form.handleSubmit();
  }}
>
  <div class={stack({ gap: "md", direction: "column" })}>
    <FormInput {form} name="fullName" label="Full name" required></FormInput>
    <FormSelect
      {form}
      name="country"
      label="Country"
      items={countries}
      placeholder="Select a country"
      required
    ></FormSelect>
    <FormCheckbox {form} name="terms" label="Agreement" errorMode="submitted">
      I accept the terms of service
    </FormCheckbox>
    <FormSubmit {form}>Continue</FormSubmit>
    {#if submitted}
      <p>
        Submitted: {submitted}
      </p>
    {/if}
  </div>
</form>

// GENERATED from packages/demos/tanstack-form/mixed-controls.demo.tsx — edit the source, not this file.
import { createSignal, Show } from "solid-js";
import {
  FormCheckbox,
  FormInput,
  FormSelect,
  FormSubmit,
  createForm,
  useFocusInvalidOnSubmit,
} from "@pindoba/solid-tanstack-form";
import { stack } from "@pindoba/styled-system/patterns";
import { z } from "zod";

const countries = [
  { id: "br", label: "Brazil" },
  { id: "us", label: "United States" },
  { id: "pt", label: "Portugal" },
];
const schema = z.object({
  fullName: z.string().min(2, "Use at least 2 characters."),
  country: z.string().min(1, "Pick a country."),
  terms: z.literal(true, { message: "You must accept the terms." }),
});
export default function MixedControlsDemo() {
  const [submitted, setSubmitted] = createSignal(null as string | null);
  const form = createForm({
    defaultValues: { fullName: "", country: "", terms: false },
    validators: { onChange: schema },
    onSubmit: async ({ value }) => {
      setSubmitted(JSON.stringify(value));
    },
  });
  const formRef = useFocusInvalidOnSubmit(form);
  return (
    <form
      ref={formRef}
      onSubmit={(event) => {
        event.preventDefault();
        void form.handleSubmit();
      }}
    >
      <div class={stack({ gap: "md", direction: "column" })}>
        <FormInput form={form} name="fullName" label="Full name" required />
        <FormSelect
          form={form}
          name="country"
          label="Country"
          items={countries}
          placeholder="Select a country"
          required
        />
        <FormCheckbox
          form={form}
          name="terms"
          label="Agreement"
          errorMode="submitted"
        >
          I accept the terms of service
        </FormCheckbox>
        <FormSubmit form={form}>Continue</FormSubmit>
        <Show when={submitted()}>
          <p>Submitted: {submitted()}</p>
        </Show>
      </div>
    </form>
  );
}

Native attributes and autofill

Every prop that isn’t a Field prop is forwarded to the rendered control, so browsers and password managers can autofill and mobile keyboards pick the right layout: autocomplete, inputmode, autocapitalize, spellcheck, enterkeyhint, pattern, min / max / step, maxlength, data-*, and so on. The wrapper’s name is also rendered as the control’s native name. The form owns the value, and the Field owns id and the aria-* wiring, so those aren’t overridable.

<FormInput> / <FormTextarea> put them on the <input> / <textarea>. Consumer change/blur handlers (onChange/onBlur in React, onInput/onBlur in Solid, oninput/onblur in Svelte) run after the form’s own.
<FormSelect> forwards Select props (clearable, leading, …) and trigger attributes; autocomplete goes on the hidden native <select> mirror, which the browser autofills and the Select syncs from.
<FormCheckbox> puts them (and the field’s aria-invalid / aria-describedby / aria-errormessage) on the checkbox <input>, not its wrapping <label>.

React uses the camel-cased names (autoComplete, inputMode, maxLength); Svelte, Solid, and Astro use the HTML names (autocomplete, inputmode, maxlength).

// React
<FormInput form={form} name="email" type="email" label="Email" autoComplete="email" />
<FormSelect form={form} name="country" label="Country" items={countries} autoComplete="country" />

<!-- Svelte -->
<FormInput
  {form}
  name="password"
  type="password"
  label="Password"
  autocomplete="new-password"
/>

Textarea

<FormTextarea> is the multi-line version of <FormInput>. It has the same Field chrome, error region, and aria-invalid / aria-describedby / aria-errormessage wiring, and it passes the Textarea’s own rows, resize, and autoResize through.

PreviewCode

---
// GENERATED from packages/demos/tanstack-form/textarea.demo.tsx — edit the source, not this file.
import {
  FormInput,
  FormSubmit,
  FormTextarea,
} from "@pindoba/astro-tanstack-form";
import { stack } from "@pindoba/styled-system/patterns";

const submitted = null as string | null;
---

<form data-ir-root="tanstack-form/textarea" data-ir="1">
  <div class={stack({ gap: "md", direction: "column" })}>
    <FormInput name="subject" label="Subject" required data-ir="2" />
    <FormTextarea
      name="message"
      label="Message"
      description="What happened, and what did you expect?"
      rows={4}
      maxlength={500}
      autoResize
      resize="none"
      required
      data-ir="3"
    />
    <FormSubmit data-ir="4">Send tone</FormSubmit>
    <!--ir:5-->
    {submitted && (
      <p>
        Submitted: <!--ir:6-->
        {submitted}
        <!--/ir-->
      </p>
    )}
    <!--/ir-->
  </div>
</form>

<script>
  import { hydrate } from "./_client/textarea.ts";

  document
    .querySelectorAll('[data-ir-root="tanstack-form/textarea"]')
    .forEach((root) => hydrate([root]));
</script>

// GENERATED from packages/demos/tanstack-form/textarea.demo.tsx — edit the source, not this file.
import { useState } from "react";
import {
  FormInput,
  FormSubmit,
  FormTextarea,
  useForm,
  useFocusInvalidOnSubmit,
} from "@pindoba/react-tanstack-form";
import { stack } from "@pindoba/styled-system/patterns";
import { z } from "zod";

const schema = z.object({
  subject: z.string().min(3, "Add a short subject."),
  message: z
    .string()
    .min(20, "Tell us a bit more (at least 20 characters).")
    .max(500, "Keep it under 500 characters."),
});
export default function TextareaDemo() {
  const [submitted, setSubmitted] = useState(null as string | null);
  const form = useForm({
    defaultValues: { subject: "", message: "" },
    validators: { onChange: schema },
    onSubmit: async ({ value }) => {
      setSubmitted(JSON.stringify(value));
    },
  });
  const formRef = useFocusInvalidOnSubmit(form);
  return (
    <form
      ref={formRef}
      onSubmit={(event) => {
        event.preventDefault();
        void form.handleSubmit();
      }}
    >
      <div className={stack({ gap: "md", direction: "column" })}>
        <FormInput form={form} name="subject" label="Subject" required />
        <FormTextarea
          form={form}
          name="message"
          label="Message"
          description="What happened, and what did you expect?"
          rows={4}
          maxLength={500}
          autoResize
          resize="none"
          required
        />
        <FormSubmit form={form}>Send tone</FormSubmit>
        {submitted && <p>Submitted: {submitted}</p>}
      </div>
    </form>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/tanstack-form/textarea.demo.tsx — edit the source, not this file.
  import {
    FormInput,
    FormSubmit,
    FormTextarea,
    createForm,
    focusInvalidOnSubmit,
  } from "@pindoba/svelte-tanstack-form";
  import { stack } from "@pindoba/styled-system/patterns";
  import { z } from "zod";

  const schema = z.object({
    subject: z.string().min(3, "Add a short subject."),
    message: z
      .string()
      .min(20, "Tell us a bit more (at least 20 characters).")
      .max(500, "Keep it under 500 characters."),
  });

  let submitted = $state(null as string | null);

  const form = createForm(() => ({
    defaultValues: { subject: "", message: "" },
    validators: { onChange: schema },
    onSubmit: async ({ value }) => {
      submitted = JSON.stringify(value);
    },
  }));
</script>

<form
  {@attach focusInvalidOnSubmit(form)}
  onsubmit={(event) => {
    event.preventDefault();
    void form.handleSubmit();
  }}
>
  <div class={stack({ gap: "md", direction: "column" })}>
    <FormInput {form} name="subject" label="Subject" required></FormInput>
    <FormTextarea
      {form}
      name="message"
      label="Message"
      description="What happened, and what did you expect?"
      rows={4}
      maxlength={500}
      autoResize
      resize="none"
      required
    ></FormTextarea>
    <FormSubmit {form}>Send tone</FormSubmit>
    {#if submitted}
      <p>
        Submitted: {submitted}
      </p>
    {/if}
  </div>
</form>

// GENERATED from packages/demos/tanstack-form/textarea.demo.tsx — edit the source, not this file.
import { createSignal, Show } from "solid-js";
import {
  FormInput,
  FormSubmit,
  FormTextarea,
  createForm,
  useFocusInvalidOnSubmit,
} from "@pindoba/solid-tanstack-form";
import { stack } from "@pindoba/styled-system/patterns";
import { z } from "zod";

const schema = z.object({
  subject: z.string().min(3, "Add a short subject."),
  message: z
    .string()
    .min(20, "Tell us a bit more (at least 20 characters).")
    .max(500, "Keep it under 500 characters."),
});
export default function TextareaDemo() {
  const [submitted, setSubmitted] = createSignal(null as string | null);
  const form = createForm({
    defaultValues: { subject: "", message: "" },
    validators: { onChange: schema },
    onSubmit: async ({ value }) => {
      setSubmitted(JSON.stringify(value));
    },
  });
  const formRef = useFocusInvalidOnSubmit(form);
  return (
    <form
      ref={formRef}
      onSubmit={(event) => {
        event.preventDefault();
        void form.handleSubmit();
      }}
    >
      <div class={stack({ gap: "md", direction: "column" })}>
        <FormInput form={form} name="subject" label="Subject" required />
        <FormTextarea
          form={form}
          name="message"
          label="Message"
          description="What happened, and what did you expect?"
          rows={4}
          maxlength={500}
          autoResize
          resize="none"
          required
        />
        <FormSubmit form={form}>Send tone</FormSubmit>
        <Show when={submitted()}>
          <p>Submitted: {submitted()}</p>
        </Show>
      </div>
    </form>
  );
}

Error visibility

By default a field’s errors appear only after it has been touched. Use errorMode to change that:

"touched" (default) — after the user interacts with the field.
"submitted" — only after a submit attempt.
"always" — as soon as the value is invalid.

<!-- Svelte -->
<FormCheckbox {form} name="terms" label="Agreement" errorMode="submitted">
  I accept the terms of service
</FormCheckbox>

<!-- Astro — same prop; the form lives in a client <script> -->
<FormCheckbox name="terms" label="Agreement" errorMode="submitted">
  I accept the terms of service
</FormCheckbox>

Generic FormField

For any control without a convenience wrapper (combobox, date picker, range, your own component), the generic <FormField> renders the field chrome and leaves the control to you.

Svelte hands you both the props bag to spread and the raw TanStack field via a control(props, field) snippet, so you wire value and handlers yourself.
Astro renders the control in the default slot; bindForm auto-wires any standard pindoba control it finds (input, checkbox, Select). Match the control’s id to the field with the exported fieldId(name) helper so the label associates natively.
React takes a control={(props, field) => …} render-prop, like Svelte.
Solid takes the same control={(props, field) => …} render-prop. It runs once, so read field.state.value inside JSX to keep the control in sync.

Toggle the demo’s Code view to see the pattern.

PreviewCode

---
// GENERATED from packages/demos/tanstack-form/generic-field.demo.tsx — edit the source, not this file.
import { InputRoot, InputField } from "@pindoba/astro-input";
import Affix from "@pindoba/astro-affix";
import { FormField } from "@pindoba/astro-tanstack-form";
import { stack } from "@pindoba/styled-system/patterns";
---

<form data-ir-root="tanstack-form/generic-field" data-ir="1">
  <div class={stack({ gap: "md", direction: "column" })}>
    <FormField
      name="handle"
      label="Username"
      description="Your public @handle."
      data-ir="2"
    >
      <InputRoot data-ir="3">
        <Affix decorative>@</Affix>
        <InputField data-ir="4" />
      </InputRoot>
    </FormField>
  </div>
</form>

<script>
  import { hydrate } from "./_client/generic-field.ts";

  document
    .querySelectorAll('[data-ir-root="tanstack-form/generic-field"]')
    .forEach((root) => hydrate([root]));
</script>

// GENERATED from packages/demos/tanstack-form/generic-field.demo.tsx — edit the source, not this file.
import { InputRoot, InputField } from "@pindoba/react-input";
import { Affix } from "@pindoba/react-affix";
import {
  FormField,
  useForm,
  useFocusInvalidOnSubmit,
} from "@pindoba/react-tanstack-form";
import { stack } from "@pindoba/styled-system/patterns";
import { z } from "zod";

const schema = z.object({
  handle: z
    .string()
    .regex(/^@?[a-z0-9_]{2,}$/i, "Letters, numbers and underscores only."),
});
export default function GenericFieldDemo() {
  const form = useForm({
    defaultValues: { handle: "" },
    validators: { onChange: schema },
    onSubmit: async () => {},
  });
  const formRef = useFocusInvalidOnSubmit(form);
  return (
    <form
      ref={formRef}
      onSubmit={(event) => {
        event.preventDefault();
        void form.handleSubmit();
      }}
    >
      <div className={stack({ gap: "md", direction: "column" })}>
        <FormField
          form={form}
          name="handle"
          label="Username"
          description="Your public @handle."
          control={(props, field) => (
            <InputRoot tone={props.tone}>
              <Affix decorative>@</Affix>
              <InputField
                {...props}
                value={String(field.state.value ?? "")}
                onInput={(event) =>
                  field.handleChange(event.currentTarget.value)
                }
                onBlur={() => field.handleBlur()}
              />
            </InputRoot>
          )}
        />
      </div>
    </form>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/tanstack-form/generic-field.demo.tsx — edit the source, not this file.
  import { InputRoot, InputField } from "@pindoba/svelte-input";
  import Affix from "@pindoba/svelte-affix";
  import {
    FormField,
    createForm,
    focusInvalidOnSubmit,
  } from "@pindoba/svelte-tanstack-form";
  import { stack } from "@pindoba/styled-system/patterns";
  import { z } from "zod";

  const schema = z.object({
    handle: z
      .string()
      .regex(/^@?[a-z0-9_]{2,}$/i, "Letters, numbers and underscores only."),
  });

  const form = createForm(() => ({
    defaultValues: { handle: "" },
    validators: { onChange: schema },
    onSubmit: async () => {},
  }));
</script>

<form
  {@attach focusInvalidOnSubmit(form)}
  onsubmit={(event) => {
    event.preventDefault();
    void form.handleSubmit();
  }}
>
  <div class={stack({ gap: "md", direction: "column" })}>
    <FormField
      {form}
      name="handle"
      label="Username"
      description="Your public @handle."
    >
      {#snippet control(props, field)}
        <InputRoot tone={props.tone}>
          <Affix decorative>@</Affix>
          <InputField
            {...props}
            value={String(field.state.value ?? "")}
            oninput={(event) => field.handleChange(event.currentTarget.value)}
            onblur={() => field.handleBlur()}
          ></InputField>
        </InputRoot>
      {/snippet}
    </FormField>
  </div>
</form>

// GENERATED from packages/demos/tanstack-form/generic-field.demo.tsx — edit the source, not this file.
import { InputRoot, InputField } from "@pindoba/solid-input";
import { Affix } from "@pindoba/solid-affix";
import {
  FormField,
  createForm,
  useFocusInvalidOnSubmit,
} from "@pindoba/solid-tanstack-form";
import { stack } from "@pindoba/styled-system/patterns";
import { z } from "zod";

const schema = z.object({
  handle: z
    .string()
    .regex(/^@?[a-z0-9_]{2,}$/i, "Letters, numbers and underscores only."),
});
export default function GenericFieldDemo() {
  const form = createForm({
    defaultValues: { handle: "" },
    validators: { onChange: schema },
    onSubmit: async () => {},
  });
  const formRef = useFocusInvalidOnSubmit(form);
  return (
    <form
      ref={formRef}
      onSubmit={(event) => {
        event.preventDefault();
        void form.handleSubmit();
      }}
    >
      <div class={stack({ gap: "md", direction: "column" })}>
        <FormField
          form={form}
          name="handle"
          label="Username"
          description="Your public @handle."
          control={(props, field) => (
            <InputRoot tone={props.tone}>
              <Affix decorative>@</Affix>
              <InputField
                {...props}
                value={String(field.state.value ?? "")}
                onInput={(event) =>
                  field.handleChange(event.currentTarget.value)
                }
                onBlur={() => field.handleBlur()}
              />
            </InputRoot>
          )}
        />
      </div>
    </form>
  );
}

Submit button

<FormSubmit> subscribes to the form’s submit-readiness and renders a Pindoba <Button> that disables while a submission is in flight, setting aria-busy during submit. By default it stays clickable when the form is invalid (so submitting surfaces the errors); set disableWhenInvalid to also disable it while invalid.

<!-- Svelte -->
<FormSubmit {form} emphasis="primary">Save changes</FormSubmit>

<!-- Astro — no form prop; it's bound by the surrounding <pindoba-form> -->
<FormSubmit emphasis="primary" disableWhenInvalid>
  Save changes
</FormSubmit>

API

Creating the form

Svelte — createForm, re-exported from @tanstack/svelte-form. See the Svelte adapter docs.
Astro — FormApi, re-exported from @tanstack/form-core. Build it in a client <script>, form.mount(), then assign to <pindoba-form>’s .form property (or call bindForm(rootEl, form)).

Both take the same option set (defaultValues, validators, onSubmit, async validation, field arrays, …).

Props

The Props tab documents three surfaces:

FormField — the field-level presentation props shared by every wrapper (and the generic <FormField>), in addition to name. In Svelte you also pass the form instance via form={...}; in Astro the form is bound by the surrounding <pindoba-form>, so the wrappers take no form prop.
FormControl — the control-specific props for the convenience wrappers (<FormInput>, <FormTextarea>, <FormSelect>, <FormCheckbox>); each applies only to the wrapper named in its description.
FormSubmit — props for the <FormSubmit> button.

#Quick start

#Control wrappers

#Native attributes and autofill

#Textarea

#Error visibility

#Generic FormField

#Submit button

#API

#Creating the form

#Props

Quick start

Control wrappers

Native attributes and autofill

Textarea

Error visibility

Generic FormField

Submit button

API

Creating the form

Props