---
title: "Endpoint Form"
description: "Create and edit endpoints: URL, description, subscriptions, and rate limit."
component: true
---

```tsx
"use client";

import { useState } from "react";
import { EndpointForm, type EndpointFormValues } from "@/components/endpoint-form";

export function EndpointFormDemo() {
  const [submitted, setSubmitted] = useState<EndpointFormValues | null>(null);

  return (
    <div className="mx-auto flex max-w-md flex-col gap-3">
      <EndpointForm onSubmit={setSubmitted} submitLabel="Create endpoint" />
      {submitted && (
        <pre className="overflow-auto rounded-md bg-muted/50 p-3 font-mono text-xs">{JSON.stringify(submitted, null, 2)}</pre>
      )}
    </div>
  );
}

```

## Installation

<ItemInstall name="endpoint-form" target="components/endpoint-form.tsx" />

## Usage

This component is presentational: it renders what you pass it and calls back on
interaction. In a live dashboard the data comes from `useCreateEndpoint() / useUpdateEndpoint()`
([@repost/portal-react](/docs/ui/portal-react)), but any data of
the same shape works.

<ComponentSource name="endpoint-form-demo" title="components/endpoint-form-demo.tsx" />

## Props

| Prop | Type | Description |
| ---- | ---- | ----------- |
| `initialValues` | `Partial<EndpointFormValues>` | Prefill for editing. |
| `onSubmit` | `(values) => void` | Called with validated values. |
| `isSubmitting` | `boolean` | Disables the submit button. |
| `error` | `string | null` | Server error shown under the form. |