Forms

Form

react-hook-form + zod integration.

Import

tsx

import { Form } from "@cronus-ui/ui";

bash

npx cronus-ui add form

Examples

Validated form

A form wired with react-hook-form and a zod schema.

tsx

const profileSchema = z.object({
  email: z.string().email("Enter a valid email address."),
  bio: z.string().min(10, "Bio must be at least 10 characters."),
});

type ProfileValues = z.infer<typeof profileSchema>;

function FormDemo() {
  const [submitted, setSubmitted] = useState(false);

  const form = useForm<ProfileValues>({
    resolver: zodResolver(profileSchema),
    defaultValues: { email: "", bio: "" },
    mode: "onChange",
  });

  const onSubmit = (values: ProfileValues) => {
    setSubmitted(true);
  };

  return (
    <Form {...form}>
      <form
        onSubmit={form.handleSubmit(onSubmit)}
        className="flex max-w-md flex-col gap-5"
        noValidate
      >
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input type="email" placeholder="you@cronus.dev" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="bio"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Bio</FormLabel>
              <FormControl>
                <Textarea rows={3} placeholder="Tell us a bit about yourself…" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <div className="flex items-center gap-3">
          <Button type="submit">Save profile</Button>
          {submitted ? (
            <Badge variant="success">
              <Check aria-hidden="true" />
              Saved
            </Badge>
          ) : null}
        </div>
      </form>
    </Form>
  );
}

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component FormDefault layout:inline style:form {
  label "Email"
  text "ada@cronus.dev"
}

page "/audit/form/default" type:custom {
  use FormDefault
}

API Reference

Generated from the component's exported types.

FormProps

Extends ComponentPropsWithoutRef<typeof FormProvider>

Prop	Type	Default	Description
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

FormFieldProps

Extends ControllerProps<TFieldValues, TName>

Prop	Type	Default	Description
`name`	`string`	—	Field path in the form values.
`control`	`Control<TFieldValues>`	—	RHF control instance.
`render`	`(props) => ReactNode`	—	Render-prop for the bound control.

FormItemProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

FormLabelProps

Extends ComponentPropsWithoutRef<typeof Label>

Prop	Type	Default	Description
`htmlFor`	`string`	—	id of the labelled control.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

FormControlProps

Extends ComponentPropsWithoutRef<typeof Slot>

Prop	Type	Default	Description
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

FormDescriptionProps

Extends HTMLAttributes<HTMLParagraphElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

FormMessageProps

Extends HTMLAttributes<HTMLParagraphElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.