Form Components

Form Components

Purpose

Form Components provide consistent, accessible input elements for user data collection across the app.

When to Use:

• Building forms (login, contact edit, settings)
• Collecting user input
• Implementing filters and search

Public API

TextInput Component

Props:

interface TextInputProps {
  value: string;
  onChangeText: (text: string) => void;
  placeholder?: string;
  label?: string;
  error?: string;
  secureTextEntry?: boolean;
  multiline?: boolean;
  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
  keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad';
}

Usage:

<TextInput
  label="Email"
  value={email}
  onChangeText={setEmail}
  placeholder="Enter your email"
  keyboardType="email-address"
  error={emailError}
/>

Select/Picker Component

Props:

interface SelectProps {
  label?: string;
  value: string;
  options: SelectOption[];
  onSelect: (value: string) => void;
}

interface SelectOption {
  label: string;
  value: string;
}

Usage:

<Select
  label="Status"
  value={status}
  options={[
    { label: 'Open', value: 'open' },
    { label: 'Resolved', value: 'resolved' },
  ]}
  onSelect={setStatus}
/>

Checkbox Component

Props:

interface CheckboxProps {
  checked: boolean;
  onChange: (checked: boolean) => void;
  label?: string;
}

Usage:

<Checkbox
  checked={isPrivate}
  onChange={setIsPrivate}
  label="Send as private note"
/>

Behavior and Constraints

Validation

Form components support validation:

• Show error state on invalid input
• Display error message below field
• Clear error on user interaction

Accessibility

• Label association with input
• Error announcements for screen readers
• Focus management for keyboard navigation

Testing

Form Input Tests

import { render, fireEvent } from '@testing-library/react-native';
import { TextInput } from './TextInput';

describe('TextInput', () => {
  it('should call onChangeText when text changes', () => {
    const onChangeText = jest.fn();
    const { getByPlaceholderText } = render(
      <TextInput
        value=""
        onChangeText={onChangeText}
        placeholder="Enter text"
      />
    );

    fireEvent.changeText(getByPlaceholderText('Enter text'), 'Hello');
    expect(onChangeText).toHaveBeenCalledWith('Hello');
  });
});

Further Reading

• UI Components - Base components
• Theme System - Styling