# Input Email

InputEmail is used to display input with built-in email validation.

## Design & usage guidelines

Use the InputEmail component when you expect the user to input an email address.
By default, the InputEmail component will validate email addresses.

If you want to add additional validation within the Web/JO, you can pass in the
`validations` prop with your own message. Note: The validations prop is not
available on mobile.

## Clearable

* **while-editing**: shows the clear button only while focused and when there is
  a value. When focus leaves the field and its controls, the button is hidden.
* **always**: shows the clear button whenever there is a value, even when
  blurred. Never shown when the field is empty.
* The clear button is not shown when the field is `disabled` or `readonly`, and
  is not supported for `multiline` inputs.

## Related components

If you are not worried about email address validation, consider using
[InputText](../InputText/InputText.md).


## Props

### Web

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `align` | `"center" | "right"` | No | — | Determines the alignment of the text inside the input. |
| `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value.  You should always use `while-editing` if you want the input t... |
| `defaultValue` | `string | Date` | No | — | Initial value of the input. Only use this when you need to pre-populate the field with a data that is not controlled ... |
| `description` | `ReactNode` | No | — | Further description of the input, can be used for a hint. |
| `disabled` | `boolean` | No | — | Disable the input |
| `id` | `string` | No | — | A unique identifier for the input. |
| `inline` | `boolean` | No | — | Adjusts the form field to go inline with a content. This also silences the given `validations` prop. You'd have to us... |
| `invalid` | `boolean` | No | — | Highlights the field red to indicate an error. |
| `loading` | `boolean` | No | — | Show a spinner to indicate loading |
| `maxLength` | `number` | No | — | Maximum character length for an input. This also changes the width to roughly the same size as the max length. This i... |
| `name` | `string` | No | — | Name of the input. |
| `onChange` | `(newValue: string | number | boolean | Date, event?: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, Element>) => void` | No | — | onChange handler that provides the new value (or event) @param newValue @param event |
| `onValidation` | `(message: string) => void` | No | — | Callback to get the the status and message when validating a field @param message |
| `placeholder` | `string` | No | — | Text that appears inside the input when empty and floats above the value as a mini label once the user enters a value... |
| `readonly` | `boolean` | No | — | Prevents users from editing the value. |
| `showMiniLabel` | `boolean` | No | `true` | Controls the visibility of the mini label that appears inside the input when a value is entered. By default, the plac... |
| `size` | `"small" | "large"` | No | — | Adjusts the interface to either have small or large spacing. |
| `validations` | `RegisterOptions` | No | — | Show an error message above the field. This also highlights the the field red if an error message shows up. |
| `value` | `string | number | Date` | No | — | Set the component to the given value. |
| `version` | `1` | No | — | Experimental: Determine which version of the FormField to use. Right now this isn't used but it will be used in the f... |
