import type { Field } from 'frogbot'
export const ContactEmail: Field = {
name: 'contactEmail',
type: 'email',
label: 'Contact email',
required: true,
}
Config options
| Option | Type | Default | Description |
|---|---|---|---|
name | string | Required | Property name used in stored records and APIs. See field names. |
type | 'email' | Required | Selects the Email field. |
label | string | Record<string, string> | (({ i18n, t }) => string) | false | Generated from name | Label shown in the admin panel. Use an object keyed by language code for translations, or false to hide the label. |
required | boolean | false | Rejects an empty value in the default validation. |
unique | boolean | false | Creates a unique database index for the field path. See indexes. |
index | boolean | false | Creates a database index for faster queries. unique already creates one. |
localized | boolean | false | Stores one value per configured locale. Ignored without localization or inside a localized parent. |
defaultValue | string or ({ locale, req, user }) => value | — | Value used when the field has no value. See default values. |
validate | Validate | Built-in validator | Replaces the built-in validator. See validation. The built-in validator checks the email format. |
hooks | { beforeValidate, beforeChange, afterChange, afterRead, beforeDuplicate } | — | Arrays of FieldHook functions for each phase. See field hooks. |
access | { create, read, update } | Allowed | FieldAccess functions for each operation. See field access control. |
hidden | boolean | false | Removes the field from API responses and the admin panel while keeping stored data. |
saveToJWT | boolean | string | false | In an auth-enabled collection, copies the value into the user’s token. A string sets the token key. See token data. |
virtual | boolean | string | false | true skips database storage; a string reads a value through a relationship path. Virtual fields are read-only in the admin panel unless admin.readOnly is false. See virtual fields. |
disableDuplicate | boolean | false | Leaves the value out when a document is duplicated, so the copy uses defaultValue. |
admin | object | — | Admin-panel options. See Admin options. |
custom | Record<string, any> | — | Server-only metadata for your own code and plugins. Use admin.custom for data the browser also needs. |
jsonSchema | Array<({ jsonSchema }) => JSONSchema4> | — | Functions that modify the JSON Schema used by type generation. |
Admin options
Email fields support the standard field admin options, plus these options:| Option | Type | Default | Description |
|---|---|---|---|
placeholder | string | Record<string, string> | — | Placeholder text. Use an object keyed by language code for translations. |
autoComplete | string | — | Value of the input’s autocomplete attribute. |
Example
import type { CollectionConfig } from 'frogbot'
export const Contacts: CollectionConfig = {
slug: 'contacts',
fields: [
{
name: 'contact',
type: 'email',
label: 'Contact email address',
required: true,
admin: {
autoComplete: 'email',
placeholder: 'name@example.com',
},
},
],
}
Custom components
Field
Server component
import { EmailField } from '@frogbotai/ui/admin'
import type { EmailFieldServerProps } from 'frogbot'
export const CustomEmailServer = (props: EmailFieldServerProps) => (
<EmailField
field={props.clientField}
path={props.path}
permissions={props.permissions}
schemaPath={props.schemaPath}
/>
)
Client component
'use client'
import { EmailField } from '@frogbotai/ui/admin'
import type { EmailFieldClientProps } from 'frogbot'
export const CustomEmailClient = (props: EmailFieldClientProps) => <EmailField {...props} />
Label
Server component
import { FieldLabel } from '@frogbotai/ui/admin'
import type { EmailFieldLabelServerProps } from 'frogbot'
export const CustomEmailLabelServer = ({ clientField, path }: EmailFieldLabelServerProps) => (
<FieldLabel
label={clientField.label || clientField.name}
path={path}
required={clientField.required}
/>
)
Client component
'use client'
import { FieldLabel } from '@frogbotai/ui/admin'
import type { EmailFieldLabelClientProps } from 'frogbot'
export const CustomEmailLabelClient = ({ field, path }: EmailFieldLabelClientProps) => (
<FieldLabel label={field.label || field.name} path={path} required={field.required} />
)