UN/LOCODE Component
A compact UN/LOCODE selector designed for form fields. Try the example booking form below.
Shipment Booking
Select origin and destination using the compact selector. It shows the selected value inline and supports clearing back to search mode.
Standalone examples
The selector in different states to illustrate selection and clearing.
Default (empty)
value = null
Pre-selected
value = "SGSIN"
Ports and Airports only
value = null
US/CA Ports and Airports only
value = null
Usage
Basic integration example for the UnlocodeInput component.
import * as React from 'react';
import { UnlocodeInput } from '@/components/unlocode-input';
import type { UnlocodeEntry } from '@/lib/unlocode';
export function BookingField() {
const [value, setValue] = React.useState<string | null>(null);
const [entry, setEntry] = React.useState<UnlocodeEntry | undefined>();
return (
<UnlocodeInput
value={value}
onValueChange={(value, entry) => {
setValue(value);
setEntry(entry);
}}
countries={['US', 'CA']}
functions={['port', 'airport']}
placeholder='Select port...'
/>
);
}