Helper

Endpoint form

Schema-driven form, emits roxy-submit

<roxy-endpoint-form>

Preview and code

Theme

Loading the component...

Install

npm install @roxyapi/ui-react

React

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

export function EndpointForm({ data }) {
  return <RoxyEndpointForm data={data} />;
}

Install

npm install @roxyapi/ui-vue

Vue

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

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

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

Install

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

app/page.tsx

import { RoxyEndpointForm } from '@/components/roxy-ui/endpoint-form'

export function EndpointForm({ data }) {
  return <RoxyEndpointForm 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
`data-endpoint`	`string`	Endpoint path the form is built for and submits to, e.g. "astrology/natal-chart". The fields are derived from the spec for that operation.
`method`	`'GET' \| 'POST'`	HTTP method of the operation. Defaults to POST.
`spec-url`	`string`	Explicit OpenAPI spec URL to build the form from. Empty resolves a version-pinned slice first, then the production spec.
`submit-label`	`string`	Override the submit-button label. Empty derives an outcome-first label from the endpoint.
`publishable-key`	`string`	Browser-safe publishable key (pk_) forwarded to the slotted city search so a natal or synastry form can geocode.
`location-url`	`string`	Where the slotted city search sends its request, absolute or page-relative. Set it when the page routes its API traffic through its own server. Unset, the search keeps its own default.

Sections you can hide

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

advancedfieldfield-errorgroupsubmittitlevalidation-error

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-spec-error`	Reports a failure to load the form schema, including the spec URL and error message.
`roxy-submit`	Provides validated form values, the endpoint, query fields, and whether the form stays visible.
`roxy-validation-error`	Reports missing required inputs or a refused client-side API key.