User Preferences Form

A simple mobile form component for capturing and managing user preferences with real-time validation.

Capabilities

Text Input Fields

Capture user information using appropriate text input fields.

• Display a text input for username with placeholder "Enter username" @test
• Display an email input with placeholder "Enter email" and email-optimized keyboard @test
• Display a password input with placeholder "Enter password" that hides the entered text @test
• Text inputs update their respective state values when text changes @test

Toggle Controls

Provide toggle switches for boolean preferences.

• Display a toggle switch for "Enable Notifications" preference @test
• Display a toggle switch for "Dark Mode" preference @test
• Toggle switches update their state when toggled @test

Submit Button

Provide a button to submit the form with validation.

• Display a "Submit" button @test
• Pressing the submit button calls onSubmit with all form values (username, email, password, notificationsEnabled, darkModeEnabled) @test
• Disable the submit button when username or email is empty @test

Implementation

@generates

API

import React from 'react';

export interface UserPreferences {
  username: string;
  email: string;
  password: string;
  notificationsEnabled: boolean;
  darkModeEnabled: boolean;
}

export interface UserPreferencesFormProps {
  onSubmit: (preferences: UserPreferences) => void;
  initialValues?: Partial<UserPreferences>;
}

export const UserPreferencesForm: React.FC<UserPreferencesFormProps>;

Dependencies { .dependencies }

react-native { .dependency }

Provides core mobile UI components for building the form interface.

@satisfied-by

react { .dependency }

Provides the React framework for building the component.

@satisfied-by