# 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

### Mobile

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `accessibilityHint` | `string` | No | — | An accessibility hint helps users understand what will happen when they perform an action on the accessibility elemen... |
| `accessibilityLabel` | `string` | No | — | VoiceOver will read this string when a user selects the associated element |
| `assistiveText` | `string` | No | — | Text that helps the user understand the input |
| `autoCapitalize` | `"characters" | "none" | "sentences" | "words"` | No | — | Determines where to autocapitalize |
| `autoComplete` | `"email" | "name" | "additional-name" | "address-line1" | "address-line2" | "birthdate-day" | "birthdate-full" | "birthdate-month" | "birthdate-year" | "cc-csc" | "cc-exp" | ... 45 more ... | "off"` | No | — | Determines which content to suggest on auto complete, e.g.`username`. Default is `off` which disables auto complete  ... |
| `autoCorrect` | `boolean` | No | — | Turn off autocorrect |
| `autoFocus` | `boolean` | No | — | Automatically focus the input after it is rendered |
| `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` | No | — | Default value for when component is uncontrolled |
| `disabled` | `boolean` | No | — | Disable the input |
| `invalid` | `boolean | string` | No | — | Highlights the field red and shows message below (if string) to indicate an error |
| `loading` | `boolean` | No | — | Show loading indicator. |
| `loadingType` | `"glimmer" | "spinner"` | No | — | Change the type of loading indicator to spinner or glimmer. |
| `multiline` | `boolean` | No | — | Determines if inputText will span multiple lines. Default is `false`  https://reactnative.dev/docs/textinput#multiline |
| `name` | `string` | No | — | Name of the input. |
| `onBlur` | `(event?: FocusEvent) => void` | No | — | Callback that is called when the text input is blurred |
| `onChangeText` | `(newValue: string) => void` | No | — | Simplified callback that only provides the new value @param newValue |
| `onFocus` | `(event?: FocusEvent) => void` | No | — | Callback that is called when the text input is focused @param event |
| `onSubmitEditing` | `(event?: SyntheticEvent<Element, Event>) => void` | No | — | Callback that is called when the text input's submit button is pressed @param event |
| `placeholder` | `string` | No | — | Hint text that goes above the value once the field is filled out |
| `prefix` | `{ icon?: IconNames; label?: string; }` | No | — | Symbol to display before the text input |
| `readonly` | `boolean` | No | — | Makes the input read-only |
| `ref` | `Ref<InputTextRef>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
| `secureTextEntry` | `boolean` | No | — | Use secure text entry |
| `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... |
| `spellCheck` | `boolean` | No | — | Determines whether spell check is used. Turn it off to hide empty autoCorrect suggestions when autoCorrect is off.  *... |
| `styleOverride` | `InputTextStyleOverride` | No | — | Custom styling to override default style of the input text |
| `suffix` | `{ icon?: IconNames; label?: string; onPress?: () => void; }` | No | — | Symbol to display after the text input |
| `testID` | `string` | No | — | Used to locate this view in end-to-end tests |
| `textContentType` | `"none" | "name" | "nickname" | "password" | "username" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "creditCardExpiration" | ... 33 more ... | "shipmentTrackingNumber"` | No | — | Determines which content to suggest on auto complete, e.g.`username`. Default is `none` which disables auto complete ... |
| `toolbar` | `ReactNode` | No | — | Add a toolbar below the input field for actions like rewriting the text. |
| `toolbarVisibility` | `"always" | "while-editing"` | No | — | Change the behaviour of when the toolbar becomes visible. |
| `transform` | `{ input?: (v: any) => string; output?: (v: string) => any; }` | No | — | transform object is used to transform the internal TextInput value It's useful for components like InputNumber where ... |
| `validations` | `RegisterOptions` | No | — | Shows an error message below the field and highlight the field red when value is invalid |
| `value` | `string` | No | — | Set the component to a given value |