Form Components

Purpose

Form components provide building blocks for forms:

• Form — React Hook Form wrapper with Zod validation
• FormHeader — Form title and description
• FormDivider — Visual separator
• Textfield — Basic text input
• Field components — Specialized inputs (email, password, calendar, etc.)

Form

Wrapper that integrates React Hook Form with Zod validation.

import Form from '@/shared/ui/components/forms/Form'
import { z } from 'zod'

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
})

export function LoginForm() {
  return (
    <Form
      schema={schema}
      defaultValues={{ email: '', password: '' }}
      onSubmit={(values) => console.log(values)}
    >
      {(methods) => (
        <>
          <FieldEmail name="email" label="Email" />
          <FieldPassword name="password" label="Password" />
          <button type="submit">Login</button>
        </>
      )}
    </Form>
  )
}

Props

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

---

Field Components

Located in src/shared/ui/components/fields/.

FieldText

Basic text input.

import FieldText from '@/shared/ui/components/fields/FieldText'

<FieldText name="username" label="Username" placeholder="Enter username" />

FieldEmail

Email input with validation styling.

import FieldEmail from '@/shared/ui/components/fields/FieldEmail'

<FieldEmail name="email" label="Email address" />

FieldPassword

Password input with show/hide toggle.

import FieldPassword from '@/shared/ui/components/fields/FieldPassword'

<FieldPassword name="password" label="Password" />

FieldCheckbox

Checkbox with label.

import FieldCheckbox from '@/shared/ui/components/fields/FieldCheckbox'

<FieldCheckbox name="terms" label="I agree to the terms" />

CalendarInput

Date/time picker with calendar popover.

import { CalendarInput } from '@/shared/ui/components/fields/CalendarInput'

<CalendarInput
  value={date}
  onChange={setDate}
  placeholder="Select date"
  includeTime
/>

CalendarInput 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

---

FormHeader

Title and description for form sections.

import FormHeader from '@/shared/ui/components/forms/FormHeader'

<FormHeader
  title="Account Settings"
  description="Update your account information"
/>

FormDivider

Visual separator between form sections.

import FormDivider from '@/shared/ui/components/forms/FormDivider'

<FormDivider />

---

Notes

• Field components integrate with React Hook Form context
• Use Form wrapper for automatic validation and error handling
• CalendarInput supports both date-only and date-time modes
• All fields support standard input props (disabled, required, etc.)