Form

Copyimport { useForm } from "@tanstack/react-form"
 
import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"

Copyconst form = useForm({
  defaultValues: { email: "" },
  onSubmit: async ({ value }) => {
    console.log(value)
  },
})
 
return (
  <Form
    onSubmit={(e) => {
      e.preventDefault()
      form.handleSubmit()
    }}
  >
    <form.Field name="email">
      {(field) => (
        <FormField
          name={field.name}
          errors={field.state.meta.errors}
          isTouched={field.state.meta.isTouched}
        >
          <FormLabel>Email</FormLabel>
          <FormControl>
            <Input
              value={field.state.value}
              onBlur={field.handleBlur}
              onChange={(e) => field.handleChange(e.target.value)}
            />
          </FormControl>
          <FormMessage />
        </FormField>
      )}
    </form.Field>
    <Button type="submit">Submit</Button>
  </Form>
)

Copy<FormField orientation="horizontal" {...props}>
  <FormControl>
    <Checkbox checked={checked} onCheckedChange={onChange} />
  </FormControl>
  <div className="space-y-1 leading-none">
    <FormLabel>Accept terms</FormLabel>
    <FormDescription>You agree to our terms of service.</FormDescription>
  </div>
</FormField>