Skip to content

Demos

Empty

<Field.Email onChange={(value) => console.log('onChange', value)} />

Placeholder

<Field.Email
placeholder="Enter email address..."
onChange={(value) => console.log('onChange', value)}
/>

Label

<Field.Email
label="Label text"
onChange={(value) => console.log('onChange', value)}
/>

Label and value

<Field.Email
label="Label text"
value="my-m@il.com"
onChange={(value) => console.log('onChange', value)}
/>

Disabled

<Field.Email
value="my-m@il.com"
label="Label text"
onChange={(value) => console.log('onChange', value)}
disabled
/>

Invalid syntax

<Field.Email
value="Not a mail"
label="Label text"
onChange={(value) => console.log('onChange', value)}
validateInitially
/>

Error message

This is what is wrong...
<Field.Email
value="foo@bar.com"
label="Label text"
onChange={(value) => console.log('onChange', value)}
error={new FormError('This is what is wrong...')}
/>

Validation - Required

<Field.Email
value="my-m@il.com"
label="Label text"
onChange={(value) => console.log('onChange', value)}
required
/>