GpsInput

react-hook-form-bound coordinate field. Renders the @uxf/ui/text-input primitive with type="text", parses the typed coordinate string with coordinate-parser, and stores a { lat, lng } object, managing the input's isInvalid and helperText from form state.

When to use

Use @uxf/form/gps-input for a GPS coordinate field inside a @uxf/form form when the form value must be a parsed { lat, lng } object. The user types coordinates in any of many supported formats (decimal, DMS, with/without hemisphere letters, …); the field parses them to latitude/longitude and shows the parsed result plus a "supported formats" tooltip in the helper text. There is no same-named @uxf/ui twin; for a plain text field use @uxf/ui/text-input.

Usage

import { Form } from "@uxf/form/form";
import { GpsInput, GpsInputValue } from "@uxf/form/gps-input";
import { useForm } from "react-hook-form";

interface FormData {
    location: GpsInputValue | null;
}

function Example() {
    const formApi = useForm<FormData>({ defaultValues: { location: null } });

    return (
        <Form formApi={formApi} id="example" onSubmit={(values) => console.log(values)}>
            <GpsInput control={formApi.control} isRequired label="GPS" name="location" placeholder="Enter coordinates" />
        </Form>
    );
}

Value is Gps (GpsInputValue) — { lat: number; lng: number }. The visible input holds the raw coordinate string; on a successful parse the field value is set to the { lat, lng } object, on a failed parse it is set to null.

Props

GpsInputProps<FormData> = ControlProps<FormData> + the visual props of the @uxf/ui/text-input twin (minus the ones this field manages: isFocused, isInvalid, max, min, name, onChange, pattern, step, value, type) + the props below.

All other props (label, placeholder, size, variant, leftAddon/rightAddon/leftElement/rightElement, maxLength, autoComplete, …) are forwarded to the twin — see @uxf/ui/text-input. Note: helperText is computed by the field (parsed value / error + tooltip) and cannot be overridden.

Validation

• isRequired adds a req validator (requiredMessage to override; key uxf-form-gps-input:validation.required).
• A format validator flags unparseable input (key uxf-form-gps-input:validation.invalid-coordinates, interpolates {{value}}).
• The helper text also uses uxf-form-gps-input:validation.empty-coordinates and a tooltip labelled uxf-form-gps-input:validation.supported-formats.
• Add further rules via rules; the field-level error and format state drive the twin's helperText and isInvalid.

Requirements

• Must be rendered inside a Form — it reads the form context (formId, and inherits isDisabled / isReadOnly) and needs a react-hook-form control.
• Ships no CSS of its own; it renders @uxf/ui/text-input (and @uxf/ui/tooltip for the formats hint), so include those components' stylesheet(s) and the @uxf/ui token layer — see @uxf/ui/text-input.
• Depends on the coordinate-parser package for parsing.

Links

• Rendered primitive: @uxf/ui/text-input