"use client";

import { useAppForm } from "@countryclub/ui-react/form";
import { useState } from "react";

const tiers = [
  { label: "Social", value: "social" },
  { label: "Golf", value: "golf" },
  { label: "Full club", value: "full" },
];

export default function TanstackFormDemo() {
  const [welcome, setWelcome] = useState<string | null>(null);

  const form = useAppForm({
    defaultValues: {
      name: "",
      tier: "",
    },
    onSubmit: async ({ value }) => {
      const tier = tiers.find((item) => item.value === value.tier);
      setWelcome(
        `Welcome to the club, ${value.name} (${tier?.label ?? value.tier} member).`,
      );
    },
  });

  return (
    <form
      className="flex w-full max-w-sm flex-col gap-4"
      noValidate
      onSubmit={(event) => {
        event.preventDefault();
        form.handleSubmit();
      }}
    >
      <form.AppField
        name="name"
        validators={{
          onDynamic: ({ value }) =>
            value.trim() ? undefined : "Member name is required",
        }}
      >
        {(field) => (
          <field.TextField
            field={field}
            label="Member name"
            placeholder="August Whitmore"
          />
        )}
      </form.AppField>
      <form.AppField
        name="tier"
        validators={{
          onDynamic: ({ value }) =>
            value ? undefined : "Choose a membership tier",
        }}
      >
        {(field) => (
          <field.SelectField
            field={field}
            label="Membership tier"
            options={tiers}
            placeholder="Select a tier"
          />
        )}
      </form.AppField>
      <form.AppForm>
        <form.SubmitButton className="self-start">
          Join the club
        </form.SubmitButton>
      </form.AppForm>
      {welcome && <p className="text-muted-foreground text-sm">{welcome}</p>}
    </form>
  );
}
TanStack Form

Import

Default
