arca-ui

Form

React Hook Form integration with validation. Clean, structured forms with crisp error messages and clear labels.

Login Form

Enter the email associated with your account.

Contact Form

Describe your inquiry in detail.

Payment Form

Your card will be stored securely for faster checkout.

Preferences Form

Receive a weekly summary of your activity.

Add an extra layer of security to your account.

Profile Form

This is your public display name.

Brief description for your profile. Max 160 characters.

Your personal or company website.

Lightweight Form Style

A subtler form style for compact spaces or inline editing.

Settings Form

Receive emails about new products and features.

Receive push notifications for important updates.

Get notified about security events on your account.

Validation Demo

Try submitting the forms above with invalid data to see the validation errors in action.

  • Email: Must be a valid email format
  • Password: Minimum 8 characters
  • Username: 2-30 characters
  • Bio: Maximum 160 characters
  • Website: Must be a valid URL (optional)
  • Card Number: Must be 16 digits
  • Expiry: Must be in MM/YY format