39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import type { EmailField } from '@payloadcms/plugin-form-builder/types'
|
|
import type { FieldErrorsImpl, FieldValues, UseFormRegister } from 'react-hook-form'
|
|
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import React from 'react'
|
|
|
|
import { Error } from '../Error'
|
|
import { Width } from '../Width'
|
|
|
|
export const Email: React.FC<
|
|
EmailField & {
|
|
errors: Partial<FieldErrorsImpl>
|
|
register: UseFormRegister<FieldValues>
|
|
}
|
|
> = ({ name, defaultValue, errors, label, register, required, width }) => {
|
|
return (
|
|
<Width width={width}>
|
|
<Label htmlFor={name}>
|
|
{label}
|
|
|
|
{required && (
|
|
<span className="required">
|
|
* <span className="sr-only">(required)</span>
|
|
</span>
|
|
)}
|
|
</Label>
|
|
<Input
|
|
defaultValue={defaultValue}
|
|
id={name}
|
|
type="text"
|
|
{...register(name, { pattern: /^\S[^\s@]*@\S+$/, required })}
|
|
/>
|
|
|
|
{errors[name] && <Error name={name} />}
|
|
</Width>
|
|
)
|
|
}
|