Address Form

Forms

About

A compact address input form with street, city, state, postal code, and country fields, with a controlled value/onValueChange API for building shipping or billing forms.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Address Form to your project and fits it to your theme.

Code

How Address Form is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import AddressForm, { AddressFormValue } from "@/components/ui/address-form";

export default function AddressFormDemo() {
  const [value, setValue] = React.useState<Partial<AddressFormValue>>({
    street: "350 Fifth Avenue",
    city: "New York",
    state: "NY",
    postal: "10118",
    country: "United States",
  });

  return (
    <div className="flex w-full items-center justify-center bg-background p-8">
      <AddressForm value={value} onValueChange={setValue} />
    </div>
  );
}