Inline Email Form
Installation
Run the following command
npx vibes@latest add inline-email-form
Usage
import { InlineEmailForm } from '@/vibes/soul/sections/inline-email-form';import { parseWithZod } from '@conform-to/zod';import { z } from 'zod';function Usage() { return ( <InlineEmailForm action={async (lastResult, formData) => { 'use server'; const schema = z.object({ email: z.string().email(), }); const submission = parseWithZod(formData, { schema }); if (submission.status !== 'success') { return { lastResult: submission.reply({ formErrors: ['Boom!'] }) }; } return { lastResult: submission.reply(), successMessage: 'Subscribed!' }; }} /> );}
API Reference
InlineEmailFormProps
Prop | Type | Default |
---|---|---|
className | string | |
placeholder | string | |
submitLabel | string | |
action | Action<{ lastResult: SubmissionResult | null; successMessage?: string }, FormData> |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --inline-email-form-focus: var(--primary); --inline-email-form-background: var(--background); --inline-email-form-placeholder: var(--contrast-500); --inline-email-form-text: var(--foreground); --inline-email-form-border: var(--black); --inline-email-form-error: var(--error);}