N
Nyxis
Components

Form

react-hook-form + zod wrapper with FormField, FormItem, FormMessage.

Preview

We'll never share your email.

Installation

pnpm add nyxis-ui

Usage

import { Form } from 'nyxis-ui';
// or, for stricter tree-shaking:
// import { Form } from 'nyxis-ui/form';

const form = useForm({ resolver: zodResolver(schema) });

return (
  <Form {...form}>
    <form onSubmit={form.handleSubmit(onSubmit)}>
      <FormField
        control={form.control}
        name="email"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <FormControl>
              <Input {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
      <Button type="submit">Submit</Button>
    </form>
  </Form>
);