Registration

Registration example demonstrating Fragment UI components and patterns.

Example

Code

import {
  FormEnhanced,
  FormFieldEnhanced,
  validators,
  Button,
  Input,
} from "@fragment_ui/ui";

function RegistrationForm() {
  return (
    <FormEnhanced
      onSubmit={(data) => {
        console.log("Form submitted", data);
      }}
      validationMode="onBlur"
    >
      <div className="space-y-4">
        <FormFieldEnhanced
          name="name"
          label="Full Name"
          rules={validators.compose(
            validators.required(),
            validators.minLength(2)
          )}
        >
          <Input placeholder="John Doe" />
        </FormFieldEnhanced>

        <FormFieldEnhanced
          name="email"
          label="Email"
          rules={validators.compose(
            validators.required(),
            validators.email()
          )}
        >
          <Input type="email" placeholder="john@example.com" />
        </FormFieldEnhanced>

        <FormFieldEnhanced
          name="password"
          label="Password"
          rules={validators.compose(
            validators.required(),
            validators.minLength(8)
          )}
        >
          <Input type="password" />
        </FormFieldEnhanced>

        <Button type="submit">Register</Button>
      </div>
    </FormEnhanced>
  );
}

Features

• Form validation with error messages
• Email format validation
• Password strength requirements
• Accessible form fields with ARIA labels
• Visual error feedback