UniqueTextField: Async-Validated Text Input

npx shadcn@latest add https://shaddy-docs.vercel.app/r/shaddy-form

"use client"
import { z } from "zod"
import { ShaddyForm } from "@/components/form/shaddy-form"
import { UniqueTextField } from "@/components/form/fields/unique-text-field"
import { SubmitButton } from "@/components/form/fields/submit-button"

const schema = z.object({
  username: z.string().min(3, { message: "Username must be at least 3 characters" }),
})

type FormValues = z.infer<typeof schema>

const initialValues: FormValues = { username: "" }

// Returns true when the value is available, false when it is taken
async function checkUsername(value: string): Promise<boolean> {
  const res = await fetch(`/api/check-username?username=${value}`)
  const data = await res.json()
  return data.available
}

export default function Example() {
  return (
    <ShaddyForm
      schema={schema}
      initialValues={initialValues}
      onSubmit={(data) => console.log(data)}
    >
      <div className="space-y-4 w-72">
        <UniqueTextField<FormValues>
          name="username"
          label="Username"
          placeholder="Choose a username"
          required
          checkFunction={checkUsername}
          debounceMs={600}
        />
        <SubmitButton label="Create Account" />
      </div>
    </ShaddyForm>
  )
}