Form

A collection of form components that work seamlessly with React Hook Form.

Usage

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>
  )
}

Examples

Basic Form

A simple form with validation.

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>
  )
}

With Custom Controls

Form with custom form controls.

<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>

Props

FormField

Prop	Type	Description
control	Control	Form control from React Hook Form
name	string	Field name
render	({ field }) => ReactNode	Render function for the field

FormItem

Accepts all standard div HTML attributes.

FormLabel

Accepts all standard label HTML attributes.

Design Considerations

• Group related fields logically
• Provide clear validation feedback
• Use consistent field layouts
• Include helpful descriptions
• Show error states clearly

Accessibility

• Uses semantic form markup
• Provides error messages
• Links labels with controls
• Maintains keyboard navigation
• Announces form validation