Form Components

Form wrapper and field components.

---

Form

React Hook Form wrapper with Zod validation.

Props

Prop	Type	Required	Description
schema	ZodType	No	Zod validation schema
defaultValues	Record<string, unknown>	No	Initial form values
onSubmit	(values) => void | Promise<void>	Yes	Submit handler
children	ReactNode | (methods) => ReactNode	Yes	Form content

Example

<Form
  schema={userSchema}
  defaultValues={{ email: '' }}
  onSubmit={handleSubmit}
>
  {(methods) => (
    <>
      <FieldEmail name="email" />
      <Button type="submit">Submit</Button>
    </>
  )}
</Form>

---

FieldText

Basic text input.

Props

Prop	Type	Required	Description
name	string	Yes	Field name
label	string	No	Field label
placeholder	string	No	Placeholder text
disabled	boolean	No	Disable input

---

FieldEmail

Email input with validation styling.

Props

Same as FieldText.

---

FieldPassword

Password input with show/hide toggle.

Props

Same as FieldText.

---

FieldCheckbox

Checkbox with label.

Props

Prop	Type	Required	Description
name	string	Yes	Field name
label	string	Yes	Checkbox label
disabled	boolean	No	Disable checkbox

---

CalendarInput

Date/time picker with calendar popover.

Props

Prop	Type	Default	Description
value	string	-	ISO date string
onChange	(value: string) => void	-	Change handler
placeholder	string	'Select date'	Placeholder text
includeTime	boolean	true	Show time picker
disabled	boolean	false	Disable input
required	boolean	false	Required field
id	string	-	Input ID
className	string	-	Trigger class

---

FormHeader

Form section title.

Props

Prop	Type	Description
title	string	Section title
description	string	Section description

---

FormDivider

Visual separator between sections.

See also

• Form Components (Conceptual)