Coordinate Pair Input

Lat/lon pair capture component with a shared DD/DDM/DMS format toggle, inline N/S and E/W direction toggles per axis, smart paste parser that detects format automatically, and a normalized DD preview with copy to clipboard. DDM default is suited to maritime/field use.

core/coordinate-pair-input

Installation

1 · Add registry to components.json

2 · Install component

Examples

Default + Maritime SAR

General mode and maritime_sar mode side by side. SAR mode uses zero-padded DDM and shows a spoken radio readback line.

Incident Position*

Default — DDM with decimal preview.

Lat

Lon

DD -34.400364, 19.122802

SAR Position*

Maritime SAR — zero-padded DDM, radio readback.

Lat

Lon

Radio readback

South 34 degrees 24 decimal 022 minutes, East 019 degrees 07 decimal 368 minutes

DD -34.400364, 19.122802

API Reference

Prop	Type	Default	Description
`value`req	`CoordinateValue`	—	Controlled { latitude, longitude } pair. Both can be null.
`onChange`req	`(value: CoordinateValue) => void`	—	Called on any change to either axis.
`mode`	`"general" \| "operational" \| "maritime_sar"`	`"general"`	Display mode. "operational"/"maritime_sar" enables fixed-width zero-padded DDM and explicit hemispheres. "maritime_sar" additionally shows the radio readback line by default.
`label`	`string`	`"Position"`	Field group label.
`defaultFormat`	`"DD" \| "DDM" \| "DMS"`	`"DDM"`	Initial format when uncontrolled.
`format`	`"DD" \| "DDM" \| "DMS"`	—	Controlled format.
`onFormatChange`	`(format: CoordinateFormat) => void`	—	Called on format changes, including after a successful paste auto-detect.
`allowPasteParse`	`boolean`	`true`	Show the expandable paste-any-format panel.
`showNormalizedPreview`	`boolean`	`true`	Show the normalized DD preview line in the footer.
`showRadioReadback`	`boolean`	—	Show the spoken radio readback line. Defaults to true when mode is "maritime_sar".
`description`	`string`	—	Helper text below the label.
`error`	`string`	—	External error shown in the footer.
`required`	`boolean`	—	Appends a red asterisk to the label.
`disabled`	`boolean`	—	Disables all inputs and controls.
`invalid`	`boolean`	—	Forces destructive border state on all inputs.