Address Input

Forms

About

A form control for entering a postal address in the field order the selected country actually writes it, with a single free-form textarea fallback for countries it doesn't know.

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

Code

How Address Input 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 AddressInput, { type AddressValue } from "@/components/ui/address-input";

export default function AddressInputDemo() {
  const [value, setValue] = React.useState<AddressValue>({
    line1: "1600 Amphitheatre Parkway",
    line2: "",
    level2: "Mountain View",
    level1: "CA",
    postal: "94043",
  });

  return (
    <div className="bg-background text-foreground font-sans p-6 max-w-[420px] w-full">
      <AddressInput
        country="US"
        value={value}
        onChange={(next) => setValue(next)}
      />
    </div>
  );
}