CTA Form
BlockBasic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { CTAForm } from "@corew500/ui/blocks/cta-form"
<CTAForm>Content</CTAForm>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading* | string | — | Main heading |
| subheading | string | — | Subheading/description |
| features | CTAFormFeature[] | [] | List of features to display |
| onFormSubmit | (data: CTAFormData) => void | — | Form submit handler |
| showPassword | enum | true | Show password field |
| showName | enum | false | Show name field |
| loading | enum | false | Loading state |
| submitLabel | string | Get Started | Submit button label |
| loadingLabel | string | Creating account... | Loading button label |
| loginText | string | Already have an account? | Login link text |
| loginHref | string | # | Login link href |
| loginLabel | string | Sign in | Login link label |
| glow | enum | false | Enable glow effects |
| placeholders | { email?: string; password?: string; name?: string; } | {} | Field placeholders |
| labels | { email?: string; password?: string; name?: string; } | {} | Field labels (i18n) |
| errors | Record<string, string> | {} | Validation errors |
| featureIcon | enum | — | Custom icon for all features (overrides individual icons) |
| passwordDescription | string | Must be at least 8 characters. | Password description text |
| customFields | CTAFormField[] | [] | Additional custom fields (text, email, or select) rendered after the built-in fields |
| variant | enum | default | — |
| size | enum | default | — |
Accessibility
Keyboard Navigation
- All interactive elements are keyboard navigable
Screen Readers
- Error messages linked via aria-describedby and aria-invalid
- Features list uses semantic <ul>/<li> elements with aria-hidden icons
Additional
- - All form fields have proper label associations via htmlFor/id
- Submit button shows disabled state during loading
Localization
Translatable Content
- - Component accepts pre-resolved translated strings
- All user-facing text is customizable via props:
- `heading`, `subheading` - Header text
- `labels` - Field labels (email, password, name)
- `submitLabel`, `loadingLabel` - Button text
- `loginText`, `loginLabel` - Login link text
- `passwordDescription` - Password field helper text
- `features[].text` - Feature list items
- No internal text hardcoding - all strings flow through props with English defaults
Additional
- `placeholders` - Input placeholders
- Validation errors via `errors` prop