You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP →
Sign inDemoInstall


Package Overview
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies



Turn your Zod schemas into configurable field arrays for easy integration with HTML, React, Vue, and more.

Version published



Zod To Fields


Automate your form field generation with type safety.

Zod To Fields is a utility that effortlessly creates form fields from Zod schemas, ensuring TypeScript type safety and developer-friendly code completion.

License Coverage Downloads Version Status

📚 Table of Contents

  1. Introduction
  2. Features
  3. Installation
  4. Usage
  5. API Reference
  6. Examples
  7. Contributing
  8. License

📑 Introduction

This library helps you convert Zod schemas to form fields, reducing boilerplate code and enforcing type safety.

⭐ Features

🛡️ Strong Type Safety with Zod and TypeScript

Eradicate runtime errors and ensure robust code with our TypeScript-based utility that flawlessly integrates with Zod schemas. Enjoy the benefits of type inference and static type checking in your form fields.

🧠 Intelligent Code Completion and Intellisense

Developer-friendly is our middle name! With strong typing, your IDE will become your best friend, providing invaluable code completion and Intellisense suggestions, making your development process faster and error-free.

🎓 Example for Code Completion

With a Zod schema like this:

const schema = z.object({
  name: z.string(),
  age: z.number(),
  isActive: z.boolean(),

The function createOptions will offer real-time attribute suggestions based on your Zod schema types.

const options = createOptions(schema)({
  // IDE suggestions here

💻 Installation

Ensure you have the power of Zod To Fields in your project by installing it via your preferred package manager:

# With npm
npm install zod-to-fields

# With Yarn
yarn add zod-to-fields

# With Pnpm
pnpm install zod-to-fields

🔔 Note: This package is optimized for ECMAScript modules (ESM). Ensure your environment supports ESM imports.

🚀 Usage

🌱 Basic Example

Generate form fields effortlessly:

import { z } from 'zod'
import { ztf } from 'zod-to-fields'

const schema = z.object({
  name: z.string(),
  age: z.number(),
  isActive: z.boolean(),

const options = ztf.createOptions(schema)({
  name: { label: 'Full Name' },
  age: { label: 'Your Age', type: 'number' },
  isActive: { label: 'Active Status', type: 'checkbox' },

const formFields = ztf.generateFields(schema, options)

🧙 Advanced Usage

Nested Schemas

For nested schemas, you can define a Zod schema as follows:

const schema = z.object({
  name: z.string(),
  lastName: z.string(),
  isAdult: z.boolean(),
  phoneNumber: z.string(),
  currency: z.enum(['USD', 'EUR', 'GBP']),
  colors: z.nativeEnum(Colors),
  email: z.string(),
  address: z.object({
    location: z.object({
      longitude: z.number(),
      latitude: z.number(),
    street: z.string(),
    city: z.string(),
    zip: z.string(),

Enums and Native Enums

The library also supports Zod's enum and nativeEnum types, allowing you to use either string-based or native TypeScript enums as options in your form fields.

📖 API Reference


 * Creates and manages field options based on a Zod schema.
 * @param initialSchema The initial Zod schema.
 * @returns An object containing methods for manipulating field options.
const options = createOptions(schema)
  • initialSchema: Your Zod schema object.
  • withFieldOptions: Method for setting field options.
  • build: Method for building the final options object.


 * Merges the provided field options with existing options.
 * @param fieldOptions The field options to merge.
 * @returns An object containing methods for further manipulation or to build the options. Chainable.
const { withFieldOptions, build } = createOptions(schema)
  /* field options */
  • fieldOptions: Object containing the attributes you want to customize.
  • Chainable methods for further manipulation.
Type Behavior
  • z.string() will generate field options of type InputStringFieldOptions, which is narrowed to allow string types like text, password, etc. You can override these settings with any other property which is a subset of Partial<InputHTMLAttributes<HTMLInputElement>>.

  • z.enum() and z.nativeEnum() will generate field options of type InputEnumFieldOptions, allowing you to specify options either as a select dropdown or as radio buttons.


 * Builds the final options object.
 * @returns The built options object.
const { build } = createOptions(schema).withFieldOptions({
  /* field options */
const finalOptions = build()

📂 Examples

Refer to the /examples folder for real-world scenarios and advanced usage.

🤝 Contributing

We love community contributions! For guidelines on how to contribute, please see

📜 License

This project is under the MIT License. See the LICENSE file for more details.



Package last updated on 30 Jun 2024

Did you know?


Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.


Related posts

SocketSocket SOC 2 Logo


  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog


Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc