@zacharyeggert/form-components

Type-safe React form components with TypeScript support for all HTML input types.

Features

• ✅ 22 type-safe input components - Complete coverage of HTML5 input types
• ✅ Full TypeScript support - Comprehensive type definitions for all props
• ✅ Zero dependencies - Pure wrappers around native inputs
• ✅ Zero runtime overhead - No additional logic or styling
• ✅ React 18 & 19 compatible - Works with modern React versions

Installation

npm install @zacharyeggert/form-components
# or
yarn add @zacharyeggert/form-components
# or
bun add @zacharyeggert/form-components

Usage

import { Text, Email, Password, Submit } from '@zacharyeggert/form-components';

function LoginForm() {
  return (
    <form>
      <Text name="username" placeholder="Username" required />
      <Email name="email" placeholder="Email" required />
      <Password name="password" placeholder="Password" required />
      <Submit value="Log In" />
    </form>
  );
}

Available Components

All 22 HTML5 input types are supported:

Text-based inputs:

• Text, Email, Password, Search, Tel, Url

Numeric inputs:

• Number, Range

Date/Time inputs:

• Date, Time, Datetime, Month, Week

Selection inputs:

• Checkbox, Radio, Color, File

Button inputs:

• Button, Submit, Reset, Image

Other:

• Hidden

TypeScript Support

Each component is fully typed with its specific input attributes:

import { Range, Number } from '@zacharyeggert/form-components';

// Range component only accepts valid range input props
<Range min={0} max={100} step={5} value={50} />

// Number component only accepts valid number input props
<Number min={0} max={10} placeholder="Enter a number" />

The type attribute is hardcoded and cannot be overridden, ensuring type safety.

Development

# Install dependencies
bun install

# Start development server with hot reload
bun dev

# Build library for distribution
bun build

# Run production server
bun start

License

MIT

Author

Zachary Eggert