Checkout

Address Form

A validated shipping or billing address form built on react-hook-form and zod. Emits a normalized Address on submit.

form

validation

address

Preview

Run the shadcn CLI. Dependencies and the shared lib block come with it.

npx shadcn add address-form

Import

import { AddressForm } from "@/components/lumo/address-form"

Example

<AddressForm
  onSubmit={(address) => saveAddress(address)}
  submitLabel="Save address"
/>

Prop	Type	Default
defaultValues	Partial<Address>	-
onSubmit	(address: Address) => void	-
submitLabel	string	"Continue"
className	string	-

All props accept standard HTML attributes unless otherwise specified.

Lumo blocks

npm packages

react-hook-formzod@hookform/resolvers

Lumo blocks copy into your repo. No runtime dependency, no lock-in. Edit the code to fit your product.