Skip to main content
The Longitude component is a specialized numeric input for capturing longitude coordinates with automatic validation and precision handling.

​
Basic Usage

<x-forms::longitude 
    name="longitude" 
    label="Location Longitude" 
/>

​
With Model Binding

<x-forms::longitude 
    name="location.longitude" 
    label="Longitude"
    :model="$venue"
/>

​
Component Attributes

​
name
string
required
The input field name
​
label
string
default:""
Label text displayed above the input
​
model
mixed
default:"null"
Model instance for automatic value binding
​
default
mixed
default:"null"
Default value when no model or old input exists
​
showErrors
boolean
default:"true"
Display validation errors below the input
​
showLabel
boolean
default:"true"
Show or hide the label
​
placeholder
string
default:""
Input placeholder text
​
showPlaceholder
boolean
default:"false"
Auto-generate placeholder from label
​
required
boolean
default:"false"
Mark field as required
​
inline
boolean
default:"false"
Display label and input inline (horizontal layout)
​
floating
boolean
default:"false"
Enable floating label style
​
inlineLabelClass
string
default:""
Additional CSS classes for inline label
​
inlineInputClass
string
default:""
Additional CSS classes for inline input wrapper
​
showJsErrors
boolean
default:"false"
Enable JavaScript validation error display
​
framework
string
default:""
CSS framework override (bootstrap-5, material-admin-26)

​
Default Attributes

The Longitude component automatically applies these HTML attributes:
  • type: number
  • step: 0.000001 (6 decimal precision)
  • min: -180 (International Date Line West)
  • max: 180 (International Date Line East)

​
Examples

​
With Validation

<x-forms::longitude 
    name="coordinates.lng" 
    label="Longitude"
    required
    :model="$location"
/>

​
Inline Layout

<x-forms::longitude 
    name="lng" 
    label="Longitude"
    inline
/>

​
Custom Placeholder

<x-forms::longitude 
    name="location_lng" 
    label="Venue Longitude"
    placeholder="e.g., 73.5093"
/>

​
Latitude and Longitude Together

<div class="row">
    <div class="col-lg-6">
        <x-forms::latitude 
            name="lat" 
            label="Latitude"
            :model="$location"
            required
        />
    </div>
    <div class="col-lg-6">
        <x-forms::longitude 
            name="lng" 
            label="Longitude"
            :model="$location"
            required
        />
    </div>
</div>

​
With Map Input

The Longitude component is commonly used alongside Map Input: 
<x-forms::map-input
    name="location"
    label="Location"
    lat-name="latitude"
    lng-name="longitude"
    :model="$venue"
    :enable-coordinates="true"
/>

​
Geospatial Integration

When using with Laravel Eloquent Spatial models: 
use MatanYadaev\EloquentSpatial\Objects\Point;

class Venue extends Model
{
    protected $casts = [
        'location' => Point::class,
    ];
}

{{-- Map input automatically extracts lat/lng from Point --}}
<x-forms::map-input
    name="location"
    label="Venue Location"
    :model="$venue"
/>

​
Notes

  • The component extends the base Input component with type="number"
  • Longitude values are constrained between -180° (West) and 180° (East)
  • Precision is set to 6 decimal places (approximately 0.11 meters accuracy)
  • Works seamlessly with the Map Input component for visual coordinate selection
  • Supports model binding with Point objects from eloquent-spatial package

Build docs developers (and LLMs) love

Get started for freeTalk to us