Skip to main content

Function: ExpenseForm()

ExpenseForm(__namedParameters): any

A form component for creating and editing expenses

Parameters​

__namedParameters​

ExpenseFormProps

Returns​

any

Description​

This component provides a form interface for users to input or modify expense details. It includes fields for amount, description, and tags with real-time validation and formatting.

Features:

  • Real-time amount formatting with currency display
  • Tag management with suggestions and validation
  • Support for both create and edit modes
  • Accessible form controls with ARIA labels
  • Responsive design with mobile-friendly inputs

Example​

// Create mode
<ExpenseForm
  onSubmit={handleSubmit}
  isSubmitting={isLoading}
/>

// Edit mode
<ExpenseForm
  onSubmit={handleUpdate}
  defaultValues={existingExpense}
  isEditing={true}
  isSubmitting={isUpdating}
/>