Input Location

lightning-input-location

Represents a geolocation compound field that accepts a latitude and longitude value.

For Use In

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

A lightning-input-location component represents a geolocation compound field that accepts user input for a latitude and longitude value. Latitude and longitude are geographic coordinates specified in decimal degrees. The geolocation compound field allows you to identify locations by their latitude and longitude. The latitude field accepts values within -90 and 90, and the longitude field accepts values within -180 and 180. An error message is displayed when you enter a value outside of the accepted range.

Here are a few examples of latitudes: -30, 45, 37.12345678, -10.0. Values such as 90.5 or -90.5 are not valid latitudes.

Here are a few examples of longitudes: -100, -120.9762, 115.84. Values such as 180.5 or -180.5 are not valid longitudes.

This example displays a geolocation compound field with a latitude of 37.7938460 and a longitude of -122.3948370.

1<template>
2    <lightning-input-location
3        label="My Coordinates"
4        latitude="37.7938460"
5        longitude="-122.3948370"
6    >
7    </lightning-input-location>
8</template>

Design

lightning-input-field implements the form element blueprint in the Salesforce Lightning Design System (SLDS). The input fields adapt to SLDS 1 or SLDS 2 styling based on the org’s theme or the container app that you use.

	SLDS 1	SLDS 2
Design	Form Element	Form Element
For Use In	Lightning Experience, Experience Builder sites, Salesforce mobile app, Mobile Offline	Lightning Experience

Input Validation

Client-side input validation is available for this component. You can require the user to make a selection by including the required attribute. An error message is automatically displayed when a user interacts with the field but leaves it empty.

To check the validity states of an input, use the validity attribute, which is based on the ValidityState object. You can access the validity states in your JavaScript. This validity attribute returns an object with boolean properties. For more information, see the lightning-input documentation.

Custom Events

change

The event fired when a value is changed in the lightning-input-location component.

The change event returns the following parameters.

Parameter	Type	Description
latitude	string	The latitude of the location.
longitude	string	The longitude of the location.

The change event properties are as follows.

Property	Value	Description
bubbles	true	This event bubbles up through the DOM.
cancelable	false	This event has no default behavior that can be canceled. You can’t call `preventDefault()` on this event.
composed	true	This event propagates outside of the component in which it was dispatched.

Attributes

Name	Description	Type	Default
disabled	If present, the geolocation fields are disabled and users cannot interact with them.	boolean	false
field-level-help	Help text detailing the purpose and function of the input.	string
label	The label of the geolocation compound field.	string
latitude	The latitude value. Latitude values must be within -90 and 90.	string
longitude	The longitude value. Longitude values must be within -180 and 180.	string
read-only	If present, the geolocations fields are read-only and cannot be edited.	boolean	false
required	If present, the geolocation fields must be filled out before the form is submitted. An error message is displayed if a user interacts with the field and does not provide a value.	boolean	false
validity	Represents the validity states that an element can be in, with respect to constraint validation.	object
variant	The variant changes the appearance of a geolocation compound field. Accepted variants include standard, label-hidden, label-inline, and label-stacked. This value defaults to standard. Use label-hidden to hide the label but make it available to assistive technology. Use label-inline to horizontally align the label and geolocation fields. Use label-stacked to place the label above the geolocation fields.	string	standard

Methods

Name	Description	Argument Name	Argument Type	Argument Description
blur	Removes keyboard focus from the latitude and longitude fields.
checkValidity	Returns the valid attribute value (Boolean) on the ValidityState object.
focus	Sets focus on the latitude field.
reportValidity	Displays the error messages and returns false if the input is invalid. If the input is valid, reportValidity() clears displayed error messages and returns true.
setCustomValidityForField	Sets a custom error message to be displayed for the latitude or longitude field when the value is submitted.	message	string	The string that describes the error. If message is an empty string, the error message is reset.
setCustomValidityForField		fieldName	string	Name of the field, which must be latitude or longitude.
showHelpMessageIfInvalid	Displays error messages on the latitude or longitude field if the coordinates are invalid.

Input Location

Design

Input Validation

Custom Events

See Also

Attributes

Methods

Lightning Component Reference

Contents