Tally UI

CustomerForm

Form fields for creating or editing a customer record

Import

import { CustomerForm } from '@tallyui/components';

Usage

<CustomerForm
  values={{ firstName: '', lastName: '', email: '', phone: '', address: '' }}
  onChangeField={(field, value) => updateField(field, value)}
  onSubmit={() => saveCustomer()}
/>

A structured form with labeled inputs for first name, last name, email, phone, and address. First and last name render side by side; email and phone use the appropriate keyboard types. An optional submit button appears when onSubmit is provided.

Props

PropTypeDefaultDescription
valuesCustomerFormValuesrequiredCurrent form field values
onChangeField(field: keyof CustomerFormValues, value: string) => voidrequiredCalled when any field changes
onSubmit() => void---Called on submit button press; hides button if omitted
submitLabelstring'Save Customer'Custom label for the submit button
classNamestring---Override container styles

CustomerFormValues

interface CustomerFormValues {
  firstName: string;
  lastName: string;
  email: string;
  phone: string;
  address: string;
}

Live demo

On this page