String builder for email inputs with a built-in format validator.
- Same API as
field.text()plus a wired-in email format check - Usually paired with
trim()andlowercase()for consistent storage - Adds
excludeEmailDomains()to block personal inbox providers
Email.web.tsxtsx
| 1 | const schema = { |
| 2 | email: field.email('Work email').required().lowercase().trim(), |
| 3 | } |
| 4 | const { Form, fields } = useFormBridge(schema) |
| 5 | <Form onSubmit={save}><fields.email inputProps={{ autoComplete:'email' }} /><Form.Submit>Send</Form.Submit></Form> |
Defaults, inheritance & field methods
- defaultValue is
'' - type is
email - A built-in email format validator is wired through
format(...)at construction time - Shared methods: see Base field builder
- String builder methods: see field.text()
Email-specific methods:
| Method | Type | Description |
|---|---|---|
excludeEmailDomains(domains, message?) | domains: string[] | Rejects a list of blocked domains such as personal inbox providers. |
Recipes
Patterns that showcase email-specific strengths.
Block personal providers
WorkEmail.tsxtsx
| 1 | const schema = { |
| 2 | workEmail: field.email('Work email') |
| 3 | .required() |
| 4 | .trim() |
| 5 | .lowercase() |
| 6 | .excludeEmailDomains( |
| 7 | ['gmail.com', 'yahoo.com', 'hotmail.com'], |
| 8 | 'Use your company email.', |
| 9 | ), |
| 10 | } |
Domain-locked guard
PartnerEmail.tsxtsx
| 1 | const schema = { |
| 2 | partnerEmail: field.email('Partner email') |
| 3 | .required() |
| 4 | .trim() |
| 5 | .lowercase() |
| 6 | .validate((value) => |
| 7 | value.endsWith('@partner.io') |
| 8 | ? null |
| 9 | : 'Use your @partner.io address.', |
| 10 | ), |
| 11 | } |
Enterprise login with polished field copy
EnterpriseLogin.tsxtsx
| 1 | const schema = { |
| 2 | email: field.email('Email') |
| 3 | .required() |
| 4 | .trim() |
| 5 | .lowercase() |
| 6 | .placeholder('you@company.com') |
| 7 | .hint('Use your work address.'), |
| 8 | } |