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, accessibility features, 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
inputPropsTextInputProps-undefinedReact Native Paper TextInput properties

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: Disabled for accuracy (autoCorrect={false})
  • Auto-complete: Email suggestions enabled (autoComplete="email")
  • 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: Password suggestions (autoComplete="password")
  • 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

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: Screen reader support and proper labeling
  • Password Toggle: Show/hide password functionality
  • Error Display: Clear validation error messages