SignIn.EmailForm.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 ExampleCopy Anchor Link

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;

PropsCopy Anchor Link

Every prop, with its type and description, is listed in the @ovok/native/auth API reference.

LocalizationCopy Anchor Link

The component uses these translation keys:

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

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

Input FeaturesCopy Anchor Link

Email InputCopy Anchor Link

• 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 InputCopy Anchor Link

• Secure Entry: Password text hidden by default (secureTextEntry={true})
• Visibility Toggle: Eye icon to show/hide password using TextInput.Icon
• 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.

Validation DisplayCopy Anchor Link

• 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 BehaviorCopy Anchor Link

• 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 PracticesCopy Anchor Link

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

FeaturesCopy Anchor Link

• 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 ComponentsCopy Anchor Link

• SignIn.EmailForm - Parent form component that provides context
• SignIn.EmailForm.SigninButton - Submit button component
• SignIn.EmailForm.ForgotPassword - Forgot password link component