Helper

Location search

Debounced city search input, emits roxy-location-select

<roxy-location-search>

Preview and code

Theme

Loading the component...

Install

npm install @roxyapi/ui-react

React

import { RoxyLocationSearch } from '@roxyapi/ui-react';

export function LocationSearch({ data }) {
  return <RoxyLocationSearch data={data} />;
}

Install

npm install @roxyapi/ui-vue

Vue

<script setup>
import { RoxyLocationSearch } from '@roxyapi/ui-vue';

defineProps(['data']);
</script>

<template>
  <RoxyLocationSearch :data="data" />
</template>

Install

npx shadcn@latest add https://cdn.jsdelivr.net/gh/RoxyAPI/ui@latest/registry/location-search.json

app/page.tsx

import { RoxyLocationSearch } from '@/components/roxy-ui/location-search'

export function LocationSearch({ data }) {
  return <RoxyLocationSearch data={data} />
}

The registry adds a typed component file to your repo. The page fetches with your secret key on the server, so no key reaches the browser.

Attributes

Attribute	Type	Description
`api-key`	`string`
`publishable-key`	`string`	Browser-safe publishable key (pk_) the search sends with its request. A secret key is refused client-side and never sent. Leave unset when `endpoint` or `submitUrl` points at your own server route.
`endpoint`	`string`	Where the search sends its GET while the visitor types, as an absolute URL or a page-relative path such as "/api/roxy/location". Wins over submitUrl. Unset with no submitUrl, the search calls the RoxyAPI location search.
`submit-url`	`string`	Your own backend route, which holds the secret key. With no endpoint set, each search is POSTed there as `{ path: "/location/search", method: "GET", query: { q, limit } }`, the shape every component request takes there.
`submit-context`	`string`	An object of your own, sent to your submitUrl route as `context` beside the search. Passed through untouched and never read.
`placeholder`	`string`	Input placeholder. The default renders in the page language; a caller-supplied one is printed as given.
`default-value`	`string`	Initial text in the input, for restoring a previous search.

Sections you can hide

Pass any of these to hide-sections, or style them with ::part().

inputoptionresults

Events

Each event bubbles out of the component, so listen on the element or any ancestor.

Event	Description
`roxy-location-select`	Provides the selected city with its coordinates and timezone.
`roxy-validation-error`	Reports missing required inputs or a refused client-side API key.