Form

import { 
  Field,
  FieldControl,
  FieldDescription,
  FieldErrorMessage,
  FieldLabel,
} from "@/components/ui/form";
import { TextInput } from "@/components/ui/text-input";

<Field>
  <FieldLabel>Username</FieldLabel>
  <FieldControl>
    <TextInput placeholder="Enter your username" />
  </FieldControl>
  <FieldDescription>This is your public display name.</FieldDescription>
  <FieldErrorMessage />
</Field>

import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "@/components/ui/button";
import {
  Field,
  FieldControl,
  FieldErrorMessage,
  FieldLabel,
  validateField,
} from "@/components/ui/form";
import { PasswordInput } from "@/components/ui/password-input";
import { TextInput } from "@/components/ui/text-input";
import { Controller, useForm } from "react-hook-form";
import { z } from "zod";

const formSchema = z.object({
  username: z.string(),
  password: z.string(),
});

const Form = () => {
  const form = useForm({
    resolver: zodResolver(formSchema),
  });

  const onSubmit = (data: z.infer<typeof formSchema>) => {
    console.log(data);
  };
  return (
    <>
      <Controller
        control={form.control}
        name="username"
        render={({ field, formState }) => (
          <Field {...validateField(formState.errors, "username")}>
            <FieldLabel>Username</FieldLabel>
            <FieldControl>
              <TextInput
                onChangeText={field.onChange}
                placeholder="Enter your username"
                value={field.value}
              />
            </FieldControl>
            <FieldErrorMessage />
          </Field>
        )}
      />
      <Controller
        control={form.control}
        name="password"
        render={({ field, formState }) => (
          <Field {...validateField(formState.errors, "password")}>
            <FieldLabel>Password</FieldLabel>
            <FieldControl>
              <PasswordInput
                onChangeText={field.onChange}
                placeholder="Enter your password"
                value={field.value}
              />
            </FieldControl>
            <FieldErrorMessage />
          </Field>
        )}
      />

      <Button onPress={form.handleSubmit(onSubmit)}>Submit</Button>
    </>
  );
};