Components
QuizEmailInput
Email capture input with basic format validation.
Purpose
Like QuizTextInput, but type="email" with inline format validation
(shown once the field has been touched and blurred).
Installation
pnpm dlx shadcn@latest add @quiz-ui/quiz-email-inputUsage
<QuizEmailInput label="Where should we send your results?" />// Custom validation message
<QuizEmailInput invalidMessage="That doesn't look like a real email." />Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Optional label above the input. |
invalidMessage | string | "Enter a valid email address." | Shown when the field is touched and doesn't match a basic email pattern. |
| ...rest | React.InputHTMLAttributes<HTMLInputElement> (minus value/onChange/type) | — | Forwarded to the underlying <input>. |
Notes
- Validation is format-only (regex), not a real deliverability check.
Whether an invalid-looking email actually blocks the user from
advancing is up to how you set
requiredon the step definition — this component only controls what's shown, not whether Next is disabled.