React Retro Form

A dynamic, retro-styled form component for React and Next.js, featuring customizable fields, built-in validation, and a nostalgic design with Lucide icons and Tailwind CSS.

REGISTER

Join the Retro Club!

BASIC INFO

USERNAME *

EMAIL *

CONTACT INFO

PHONE NUMBER

SECURITY

PASSWORD *

CONFIRM PASSWORD *

GENDER

Usage

The RetroForm component is highly customizable and supports various field types (text, email, password, tel, date, select). Below is an example for a registration form:

Props

Prop	Type	Default	Required	Description
formType	'register' \| 'profile' \| 'login'	None (required)	No	Defines the type of form, affecting default titles and required fields.
fields	FieldConfig[]	[]	No	Array of field objects with `name`, `type`, `label`, `placeholder`, `icon`, `options`, `required`, and optional `section` for grouping.
onSubmit	(data: Record<string, string>) => void	None (required)	No	Callback function triggered on form submission with form data.
title	string	Conditional: 'SIGN IN' (login), 'REGISTER' (register), 'UPDATE PROFILE' (profile)	No	Main title of the form.
subtitle	string	Conditional: 'Welcome Back!' (login), 'Join the Retro Club!' (register), 'Update Your Info!' (profile)	No	Subtitle text below the form title.
buttonText	string	Conditional: 'LOGIN' (login), 'SUBMIT' (register/profile)	No	Text for the submit button.
showOTP	boolean	false	No	Enables OTP verification for the phone number field. Note: OTP functionality is a placeholder and requires integration with an external service (e.g., Twilio).

Field Config

Prop	Type	Default	Required	Description
name	string	None (required)	No	Unique identifier for the field.
type	'text' \| 'email' \| 'password' \| 'tel' \| 'date' \| 'select'	'text'	No	Field input type.
label	string	None (required)	No	Display label for the field.
placeholder	string	`Enter ${label.toLowerCase()}`	No	Placeholder text for the input.
icon	'user' \| 'mail' \| 'lock' \| 'phone' \| 'calendar' \| 'mapPin' \| React.ElementType	'user'	No	Icon to display with the field. Can be a predefined string or a custom React component.
options	{ value: string; label: string }[]	undefined	No	Options for select fields. If empty, the select field is replaced with a disabled text input.
required	boolean	false	No	Marks the field as required.
section	string	undefined	No	Groups fields under a section header.

Accessibility

Semantic input and select elements with aria-label and aria-required attributes.
ARIA live regions (aria-live="polite") for error and success messages to ensure screen reader compatibility.
Full keyboard navigation support for inputs, buttons, and select elements (via Enter and Space keys).
Visible asterisks for required fields and high-contrast styling for readability.
Error states with subtle shake animations and success states with green borders.

Styling

Uses Tailwind CSS for responsive grid layouts and retro aesthetics.
Dark mode support with gradient backgrounds (purple-blue-indigo).
3D effects with transform-gpu, box-shadow, and perspective for a nostalgic look.
Smooth hover and focus animations using transition-all and cubic-bezier curves.
Theming support with a theme object for primary, success, and error colors.

Notes

The OTP functionality (showOTP) is a placeholder and logs to the console. For production, integrate with an OTP service like Twilio or Firebase.
For large forms, consider using react-hook-form for optimized state management and validation.
Styles are Tailwind-specific but can be extracted to a CSS module for non-Tailwind projects.