# Region picker
> Pick a deployment region from a list with a map above it.
- React: `import { GeoRegionPicker } from "@/components/lumesec/geo-region-picker"`
- Collection: Location (https://elements.lumesec.ai/components/location)
- Data: takes your data (`data`); shows demo data until you pass it
- Registry item: https://elements.lumesec.ai/r/geo-region-picker.json
- Page: https://elements.lumesec.ai/components/location/region-picker



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

Demo source:

```tsx
"use client";

import * as React from "react";

import { GeoRegionPicker } from "@/components/lumesec/geo-region-picker";
import { DEMO_REGIONS } from "@/lib/lumesec/geo-data";

const MADRID_OFFICE = { lat: 40.4168, lon: -3.7038, label: "Madrid office" };

const BUTTON =
  "h-[30px] shrink-0 cursor-pointer rounded-lg border border-border bg-card px-[11px] font-[inherit] text-[12.5px] font-medium text-foreground outline-none 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";

export default function GeoRegionPickerDemo() {
  const [submitted, setSubmitted] = React.useState<string | null>(null);

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const region = new FormData(event.currentTarget).get("region");
    setSubmitted(typeof region === "string" ? region : "");
  }

  return (
    <form onSubmit={handleSubmit} className="grid w-full max-w-[400px] gap-3">
      <GeoRegionPicker name="region" regions={DEMO_REGIONS} from={MADRID_OFFICE} label="Deployment region" />
      <div className="flex min-w-0 items-center gap-3">
        <button type="submit" className={BUTTON}>
          Submit
        </button>
        <output className="min-w-0 truncate text-[12.5px] leading-5 text-muted-foreground">
          {submitted === null ? (
            "Not submitted yet"
          ) : (
            <>
              Submitted <span className="font-mono text-foreground">region={submitted || "(none)"}</span>
            </>
          )}
        </output>
      </div>
    </form>
  );
}
```

## Installation

```bash
npx shadcn@latest add @lumesec/geo-region-picker
```

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-region-picker.json
```

## Usage

React:

```tsx
import { GeoRegionPicker } from "@/components/lumesec/geo-region-picker";

export function Example() {
  return (
    <form>
      <GeoRegionPicker name="region" defaultValue="eu-west" from={{ lat: 40.4168, lon: -3.7038, label: "Madrid office" }} />
    </form>
  );
}
```

## Behaviour

Pick a deployment region from a list with a map above it. The selection reticle travels to the new region along the great-circle path with a comet tail, and the land dots under it are magnified as it passes.

Give it a `from` location and every region shows an estimated round trip, with a dotted line from that location to the region you point at. It submits with forms through a hidden input.

## 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).