Form

import { useForm } from "react-hook-form"
import { Form } from "@rhinolabs/ui"
 
export default function FormDemo() {
  const form = useForm()
  
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(console.log)}>
        <Form.Field
          control={form.control}
          name="username"
          render={({ field }) => (
            <Form.Item>
              <Form.Label>Username</Form.Label>
              <Form.Control>
                <input {...field} />
              </Form.Control>
              <Form.Description>
                Enter your username.
              </Form.Description>
              <Form.Message />
            </Form.Item>
          )}
        />
      </form>
    </Form>
  )
}

import { useForm } from "react-hook-form"
import * as z from "zod"
import { zodResolver } from "@hookform/resolvers/zod"
 
const formSchema = z.object({
  username: z.string().min(2).max(50),
  email: z.string().email(),
})
 
function BasicForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
  })
 
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(console.log)} className="space-y-4">
        <Form.Field
          control={form.control}
          name="username"
          render={({ field }) => (
            <Form.Item>
              <Form.Label>Username</Form.Label>
              <Form.Control>
                <input {...field} />
              </Form.Control>
              <Form.Message />
            </Form.Item>
          )}
        />
        <Form.Field
          control={form.control}
          name="email"
          render={({ field }) => (
            <Form.Item>
              <Form.Label>Email</Form.Label>
              <Form.Control>
                <input type="email" {...field} />
              </Form.Control>
              <Form.Message />
            </Form.Item>
          )}
        />
        <button type="submit">Submit</button>
      </form>
    </Form>
  )
}

<Form {...form}>
  <form onSubmit={form.handleSubmit(console.log)}>
    <Form.Field
      control={form.control}
      name="notifications"
      render={({ field }) => (
        <Form.Item className="flex flex-row items-start space-x-3 space-y-0">
          <Form.Control>
            <Checkbox
              checked={field.value}
              onCheckedChange={field.onChange}
            />
          </Form.Control>
          <div className="space-y-1 leading-none">
            <Form.Label>
              Email notifications
            </Form.Label>
            <Form.Description>
              Receive emails about your account activity.
            </Form.Description>
          </div>
        </Form.Item>
      )}
    />
  </form>
</Form>