Domain field

One input over every zone your customer's connected accounts reach, completing what they type and naming the account the records will 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

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

Boundary

The field lists what the transport reports and writes nothing. Creating the domain in your product is your own submit; onResolve gives it the name and the connection to submit together, and fires whenever either changes.