Create Next App

Field Type Demo

Demonstrating all field types with their variations

String Fields

String Required*

Max 100

String Optional

String Required with Default*

Min 3, Default: "Default String"

String Optional with Default

Default: "Optional Default"

String Nullish

String Nullish with Default

Nullable, Default: "Nullable Default" (can clear with null)

Number Fields

Number Required*

Number Optional

Number Required with Default*

Default: 42

Number Optional with Default

Optional with default: 100 (will error if cleared with null)

Number Nullish

Number Nullish with Default

Nullable with default: 200 (can clear with null)

Boolean Fields

Boolean Required*

Boolean Optional

Boolean Required with Default*

Default: true

Boolean Optional with Default

Optional with default: false

Boolean Nullish

Boolean Nullish with Default

Nullable with default: true

Array of String Fields

Array of String Required*

Array of String Optional

Array of String Required with Default*

Default: ["tag1", "tag2"]

Array of String Optional with Default

Default: ["optional1"] (CAN'T clear - reverts to default)

Array of String Nullish

Array of String Nullish with Default

Default: ["nullable1"] (CAN clear with null)

useWatch Demo (with useFormContext)

stringRequired: undefined

numberRequired: undefined

objectRequired.street: undefined

objectRequired.city: undefined

arrayOfObjects[0].name: "item1"

arrayOfObjects[0].value: "value1"

All fields correctly typed as T | undefined. Nested objects use PartialWithNullableObjects; array items use RHF's PathValue.

Note: Array of Objects and Object fields are also supported but require custom UI components for proper editing. The defaults are being populated correctly via getSchemaDefaults().