Domain field

A React domain input that completes from the zones your customer's connected DNS accounts reach, and names the account the records go to.

domain-field is how a customer adds a domain without typing the whole of it. The zones every connected account reaches load when the field mounts, typing filters them, and the line underneath says where the records will go.

import { useState } from "react";

import { DomainField } from "@/components/domainkit/domain-field";

import { PreviewRoot, previewMarks } from "../../lib/preview-flow.tsx";

function Field() {
  const [value, setValue] = useState("");
  return (
    <DomainField
      marks={previewMarks}
      onChange={setValue}
      placeholder="mail.northwind.app"
      value={value}
    />
  );
}

export default function DomainFieldExample() {
  return (
    <PreviewRoot>
      <Field />
    </PreviewRoot>
  );
}

Installation

npx shadcn@latest add https://domain-kit.dev/r/domain-field.json

pnpm dlx shadcn@latest add https://domain-kit.dev/r/domain-field.json

yarn dlx shadcn@latest add https://domain-kit.dev/r/domain-field.json

bunx shadcn@latest add https://domain-kit.dev/r/domain-field.json

nubx shadcn@latest add https://domain-kit.dev/r/domain-field.json

aube dlx shadcn@latest add https://domain-kit.dev/r/domain-field.json

How it completes

A suggestion never replaces what the customer typed, it finishes it: “mail.ex” against example.com completes to mail.example.com. The arrow keys move the highlight, Tab or Enter completes it, and Escape closes the list. A domain outside every connected zone leaves the input a plain text field, because those records are ones the customer adds by hand.

With no account connected yet, the field offers the providers instead, and an account the provider turned down is offered as a reconnect rather than as a second account.

API

Prop	Type	Required	Description
`value`	`string`	yes	The value your form holds.
`onChange`	`(value: string) => void`	yes	Fires on every keystroke.
`onResolve`	`(input: { domain, connection }) => void`	no	Fires when the value or its account changes.
`marks`	`ProviderArtwork`	no	Your artwork per provider id.
`id`	`string`	no	The input’s id; one is generated otherwise.
`placeholder`	`string`	no	The input’s placeholder.

Boundary

The field lists zones and can connect or reconnect provider accounts through your transport. It does not create a domain in your product or provision DNS records. Creating the domain in your product remains your form’s submit action; onResolve gives it the name and the connection to submit together, and fires whenever either changes.