Signup Form
BlockBasic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { SignupForm } from "@corew500/ui/blocks/signup-form"
<SignupForm>Content</SignupForm>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| onFormSubmit | (data: SignupFormData) => void | — | Called when the form is submitted |
| onSocialSignup | (provider: string) => void | — | Called when social signup button is clicked |
| signInHref | string | # | URL for sign in link |
| loading | enum | false | Whether the form is in a loading state |
| title | string | Create an account | Custom title for the card |
| description | string | Enter your information below to create your account | Custom description for the card |
| glow | enum | false | Enable glow effects on inputs and buttons |
| success | enum | false | When true, shows success state instead of form |
| successTitle | string | Account Created! | Title shown in success state |
| successDescription | string | Please check your email to verify your account. | Description shown in success state |
| successSubDescription | string | — | Secondary description shown in success state |
| successAction | enum | — | Optional action element for success state |
| labels | { name?: string; email?: string; password?: string; confirmPassword?: string; terms?: string; termsLink?: string; termsConjunction?: string; privacyLink?: string; } | {} | — |
| placeholders | { name?: string; email?: string; password?: string; confirmPassword?: string; } | {} | — |
| descriptions | { email?: string; password?: string; confirmPassword?: string; } | {} | — |
| buttonLabels | { submit?: string; loading?: string; signIn?: string; signInPrompt?: string; socialGoogle?: string; } | {} | — |
| errors | { name?: string; email?: string; password?: string; confirmPassword?: string; terms?: string; general?: string; } | {} | — |
| features | { passwordToggle?: boolean; passwordRequirements?: boolean; termsCheckbox?: boolean; socialLogin?: boolean; socialSignup?: boolean; } | {} | — |
| termsHref | string | # | URL for terms of service |
| privacyHref | string | # | URL for privacy policy |
| passwordRequirements | PasswordRequirement[] | — | Custom password requirements |
Accessibility
Keyboard Navigation
- All interactive elements are keyboard navigable
- Enter key submits the form when focused on any input
Screen Readers
- Error messages are linked via aria-describedby and aria-invalid
- Password requirements list uses proper ARIA roles for screen readers
- Terms checkbox has comprehensive aria-label with full legal text
- Submit button shows loading state with aria-busy attribute
- Success state uses role="status" and aria-live="polite" for announcements
Additional
- - All form fields have proper label associations via htmlFor/id
Localization
Translatable Content
- - Component accepts pre-resolved translated strings
- All user-facing text is customizable via props:
- `title`, `description` - Form header text
- `successTitle`, `successDescription`, `successSubDescription` - Success state text
- `labels` - Field labels (name, email, password, confirmPassword, terms, termsLink, privacyLink)
- `descriptions` - Field helper text (email, password, confirmPassword)
- `buttonLabels` - All button/link text (submit, loading, signIn, socialGoogle)
- No internal text hardcoding - all strings flow through props with English defaults
Additional
- `placeholders` - Input placeholders
- `errors` - Validation error messages