Field

In the app

Label, control, and one line under it: a hint, or an error that replaces the hint. The connector forms in the app, generalised.

@varick/ui/components/fieldAdded 2 Sept 2026

Workspace

Lowercase, hyphens allowed.

Webhook URL

Must start with https://

Usage

import { Field } from "@varick/ui/components/field";
import { Input } from "@varick/ui/components/input";

export function Example() {
  return (
    <Field label="Workspace" hint="Lowercase, hyphens allowed." htmlFor="ws">
      <Input id="ws" value={ws} onChange={(e) => setWs(e.target.value)} />
    </Field>
  );
}

API reference

Every component also accepts className and the native props of its root element.

Prop	Type	Default	Description
label	string	required	The visible label.
htmlFor	string	undefined	The control’s id, so the label focuses it.
hint	string	undefined	Quiet help text under the control.
error	string	undefined	Replaces the hint in red and sets data-invalid on the field.

Accessibility

The error line is role="alert" so it is announced as it appears. Also set invalid on the control inside.

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

.connector-field { display: flex; flex-direction: column; gap: 8px; }
.connector-label { font-size: 12.5px; font-weight: 500; color: var(--fg-high); }
.connector-hint { font-size: 11.5px; line-height: 1.4; color: var(--fg-mid); }
.connector-error { font-size: 11.5px; line-height: 1.4; color: var(--danger); }