@birhaus/forms

BIRHAUS Form Components - MinimalForm with progressive disclosure and Miller's Law compliance.

Installation

npm install @birhaus/forms

Peer Dependencies

• react >= 18.0.0
• react-dom >= 18.0.0

Usage

MinimalForm with Miller's Law

import { MinimalForm, FormHeader, FormNavigation } from '@birhaus/forms'

function ContactForm() {
  return (
    <MinimalForm
      maxFields={7} // Miller's Law: 7±2 items
      onSubmit={handleSubmit}
      submitLabel="Enviar Formulario"
      enableProgressDisclosure={true}
    >
      <FormHeader
        title="Contacto"
        description="Complete el formulario para contactarnos"
      />
      
      <Input name="nombre" label="Nombre" required />
      <Input name="email" label="Email" type="email" required />
      <Input name="telefono" label="Teléfono" />
      <Input name="empresa" label="Empresa" />
      <Input name="mensaje" label="Mensaje" multiline />
      
      <FormNavigation 
        showProgress={true}
        enableUndo={true}
      />
    </MinimalForm>
  )
}

Features

• Miller's Law Compliance: Max 7±2 form fields per step
• Progressive Disclosure: Show information at the right time
• Auto-save Status: Real-time save indicators
• Undo Patterns: No confirmation dialogs, use undo instead
• Spanish-first: Primary labels in Spanish, English secondary
• Accessibility: WCAG AA+ compliance

Components

• MinimalForm - Main form wrapper with cognitive load management
• FormHeader - Form title and description
• FormNavigation - Step navigation with progress indicators
• AutoSaveStatus - Real-time save status indicator

License

MIT