Skip to main content

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 Example​

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​

PropTypeRequiredDefaultDescription
styleStyleProp<ViewStyle>-undefinedContainer style overrides
testIDstring-undefinedTest identifier for automation
inputPropsOmit<TextInputProps, "ref" | "onChangeText" | "value" | "testID"> & { containerStyle?: ViewStyle }-undefinedReact Native Paper TextInput properties; controlled form fields cannot override the omitted keys

Localization​

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 Features​

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​

  • 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 Display​

  • Real-time Validation: Errors shown after field loses focus
  • Error Styling: Input borders change to error color
  • Error Messages: Displayed below inputs with clear descriptions
  • Form Integration: Connected to overall form validation state

Input Behavior​

  • Auto-focus: Email field receives focus on component mount
  • 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​

  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​

  • 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