# SignIn.EmailForm.Inputs

Canonical page: https://docs.ovok.com/native-sdk/guide/components/auth/sign-in/form/inputs

Email and password input fields with validation, error display, and theme integration. Provides form inputs with built-in validation and password visibility toggle functionality.

## Quick Start Example [#quick-start-example]

```tsx
import { SignIn, useAppTheme } from "@ovok/native";
import { StyleSheet } from "react-native";

// Static styles outside component
const styles = StyleSheet.create({
  form: {
    flex: 1,
  },
});

const InputsExample = () => {
  const theme = useAppTheme();

  return (
    <SignIn.EmailForm
      loginType="Patient"
      tenantCode="your-tenant-code"
      style={[
        styles.form,
        {
          gap: theme.spacing(4),
        },
      ]}
    >
      <SignIn.EmailForm.Inputs
        style={{
          gap: theme.spacing(3),
        }}
      />
    </SignIn.EmailForm>
  );
};

export default InputsExample;
```

## Props [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/auth` API reference](/native-sdk/reference/auth).

## Localization [#localization]

The component uses these translation keys:

```json
{
  "sign-in": {
    "email": "Email",
    "password": "Password"
  }
}
```

- `sign-in.email` - Label for email input field
- `sign-in.password` - Label for password input field

## Input Features [#input-features]

### Email Input [#email-input]

- **Keyboard Type**: Email keyboard layout (`keyboardType="email-address"`)
- **Auto-capitalization**: Disabled for email addresses (`autoCapitalize="none"`)
- **Auto-correction and auto-complete**: Not set by the SDK; pass these through `inputProps` when needed.
- **Validation**: Email format validation

### Password Input [#password-input]

- **Secure Entry**: Password text hidden by default (`secureTextEntry={true}`)
- **Visibility Toggle**: Eye icon to show/hide password using [TextInput.Icon](https://callstack.github.io/react-native-paper/docs/components/TextInput/#textinputicon)
- **Maximum Length**: 64 characters (`maxLength={64}`)
- **Auto-complete**: Not set by the SDK; pass the desired password-manager hint through `inputProps`.
- **Validation**: Required field validation

> For additional input customization options, refer to the [React Native Paper TextInput props documentation](https://callstack.github.io/react-native-paper/docs/components/TextInput/#props).

## Validation Display [#validation-display]

- **When errors appear**: Validation errors appear after a field value changes or the form is submitted; autofocus and blur alone do not show an untouched required-field error
- **Error Styling**: Input borders change to error color
- **Error Messages**: Displayed below inputs after validation is relevant
- **Form Integration**: Connected to overall form validation state

## Input Behavior [#input-behavior]

- **Auto-focus**: Email field receives focus on component mount; this does not mark it as edited or show a required error
- **Tab Navigation**: Password field focused after email completion
- **Form Submission**: Enter key on password field submits form
- **Error Handling**: Validation errors prevent form submission

The SDK applies the email field's focus behavior, the password field's `Next` action,
and the final field's `Done` submit action after spreading `inputProps`. Those
flow-critical values cannot be overridden through `inputProps`; use a custom form when
the keyboard sequence must differ.

## Best Practices [#best-practices]

1. **Theme Integration**: Use theme values for consistent styling
2. **Accessibility**: Ensure proper labels and hints for screen readers
3. **Validation**: Provide clear, actionable error messages
4. **User Experience**: Let users toggle password visibility
5. **Form Flow**: Design logical tab navigation between fields

## Features [#features]

- **Form Integration**: Seamless integration with EmailForm context
- **Theme Integration**: Consistent styling with app theme
- **Validation**: Built-in email and password validation
- **Accessibility boundary**: Supply app-owned labels, hints, and announcements
  through the input props when the default field labels are not sufficient
- **Password Toggle**: Show/hide password functionality
- **Error Display**: Clear validation error messages

## Related Components [#related-components]

- [SignIn.EmailForm](/native-sdk/guide/components/auth/sign-in/form/) - Parent form component that provides context
- [SignIn.EmailForm.SigninButton](/native-sdk/guide/components/auth/sign-in/form/signin-button) - Submit button component
- [SignIn.EmailForm.ForgotPassword](/native-sdk/guide/components/auth/sign-in/form/forgot-password) - Forgot password link component