# Coordinate field
> A text field for coordinates that reads the usual ways of writing them: decimal degrees, degrees with minutes and seconds, hemisphere letters, or a si
- React: `import { GeoCoordinate } from "@/components/lumesec/geo-coordinate"`
- Collection: Location (https://elements.lumesec.ai/components/location)
- Registry item: https://elements.lumesec.ai/r/geo-coordinate.json
- Page: https://elements.lumesec.ai/components/location/coordinate



Live preview: https://elements.lumesec.ai/view/geo-coordinate

Demo source:

```tsx
"use client";

import * as React from "react";

import { GeoCoordinate, type GeoCoordinateHandle } from "@/components/lumesec/geo-coordinate";

/** Three notations: a signed decimal pair, degrees and minutes with letters, and a pair separated by a space. */
const EXAMPLES = ["48.8566, 2.3522", "33°52′S 151°12′E", "-22.9068 -43.1729"];

export default function GeoCoordinateDemo() {
  const fieldRef = React.useRef<GeoCoordinateHandle>(null);
  return (
    <div className="grid w-full max-w-[380px] gap-3">
      <GeoCoordinate ref={fieldRef} defaultValue={{ lat: 40.7128, lon: -74.006 }} />
      <div className="flex flex-wrap items-center gap-1.5">
        {EXAMPLES.map((example) => (
          <button
            key={example}
            type="button"
            onClick={() => fieldRef.current?.setText(example)}
            className="h-[30px] cursor-pointer rounded-lg border border-border bg-card px-[11px] font-mono text-[12px] font-medium text-foreground hover:border-[color-mix(in_srgb,var(--lumesec)_50%,var(--border))] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-lumesec"
          >
            {example}
          </button>
        ))}
      </div>
    </div>
  );
}
```

## Installation

```bash
npx shadcn@latest add @lumesec/geo-coordinate
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/geo-coordinate.json
```

## Usage

React:

```tsx
"use client";

import * as React from "react";

import { GeoCoordinate, type LatLon } from "@/components/lumesec/geo-coordinate";

export function Example() {
  const [site, setSite] = React.useState<LatLon | null>({ lat: 48.8566, lon: 2.3522 });
  return <GeoCoordinate name="site" label="Site location" value={site} onValueChange={setSite} />;
}
```

## Behaviour

A text field for coordinates that reads the usual ways of writing them: decimal degrees, degrees with minutes and seconds, hemisphere letters, or a signed pair. A small world map beside it shows what it read.

The map has a parallel and a meridian on separate springs: typing the latitude moves the horizontal line, the longitude moves the vertical one, and when both are read the crossing locks with a ping. Below the field the coordinates appear in the other format, with hemisphere letters that flip over when the sign changes.

## API reference

### Ref

`ref` points at the root `HTMLDivElement`.

## Theming

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).