"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface AddressValue {
  street: string;
  city: string;
  region: string;
  postalCode: string;
  country: string;
}

export interface AddressInputProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
  value?: AddressValue;
  defaultValue?: AddressValue;
  onChange?: (value: AddressValue) => void;
  label?: string;
  countries?: string[];
}

const defaultAddress: AddressValue = {
  street: "",
  city: "",
  region: "",
  postalCode: "",
  country: "United States",
};

const defaultCountries = [
  "United States",
  "United Kingdom",
  "Canada",
  "Germany",
  "Australia",
];

export function AddressInput({
  value,
  defaultValue = defaultAddress,
  onChange,
  label,
  countries = defaultCountries,
  className,
  ...props
}: AddressInputProps) {
  const isControlled = value !== undefined;
  const [internalValue, setInternalValue] = React.useState(defaultValue);
  const currentValue = isControlled ? value ?? defaultAddress : internalValue;

  const updateField = (field: keyof AddressValue, nextValue: string) => {
    const updated = { ...currentValue, [field]: nextValue };
    if (!isControlled) {
      setInternalValue(updated);
    }
    onChange?.(updated);
  };

  return (
    <div className={cn("w-full max-w-2xl space-y-3", className)} {...props}>
      {label ? (
        <div className="text-sm font-medium text-foreground">{label}</div>
      ) : null}
      <div className="grid gap-4 sm:grid-cols-2">
        <div className="sm:col-span-2">
          <label className="mb-1 block text-xs text-muted-foreground">Street</label>
          <input
            type="text"
            value={currentValue.street}
            onChange={(event) => updateField("street", event.target.value)}
            placeholder="123 Market Street"
            className={cn(
              "h-10 w-full rounded-lg border border-border bg-card px-3 text-sm text-foreground",
              "placeholder:text-muted-foreground focus-visible:outline-none"
            )}
          />
        </div>
        <div>
          <label className="mb-1 block text-xs text-muted-foreground">City</label>
          <input
            type="text"
            value={currentValue.city}
            onChange={(event) => updateField("city", event.target.value)}
            placeholder="San Francisco"
            className={cn(
              "h-10 w-full rounded-lg border border-border bg-card px-3 text-sm text-foreground",
              "placeholder:text-muted-foreground focus-visible:outline-none"
            )}
          />
        </div>
        <div>
          <label className="mb-1 block text-xs text-muted-foreground">State or region</label>
          <input
            type="text"
            value={currentValue.region}
            onChange={(event) => updateField("region", event.target.value)}
            placeholder="California"
            className={cn(
              "h-10 w-full rounded-lg border border-border bg-card px-3 text-sm text-foreground",
              "placeholder:text-muted-foreground focus-visible:outline-none"
            )}
          />
        </div>
        <div>
          <label className="mb-1 block text-xs text-muted-foreground">Postal code</label>
          <input
            type="text"
            value={currentValue.postalCode}
            onChange={(event) => updateField("postalCode", event.target.value)}
            placeholder="94103"
            className={cn(
              "h-10 w-full rounded-lg border border-border bg-card px-3 text-sm text-foreground",
              "placeholder:text-muted-foreground focus-visible:outline-none"
            )}
          />
        </div>
        <div>
          <label className="mb-1 block text-xs text-muted-foreground">Country</label>
          <select
            value={currentValue.country}
            onChange={(event) => updateField("country", event.target.value)}
            className={cn(
              "h-10 w-full rounded-lg border border-border bg-card px-3 text-sm text-foreground",
              "transition focus-visible:outline-none"
            )}
          >
            {countries.map((countryOption) => (
              <option key={countryOption} value={countryOption}>
                {countryOption}
              </option>
            ))}
          </select>
        </div>
      </div>
    </div>
  );
}
Address Input

Dependencies

Files

Installation
