Field

Form

A render-prop field wrapper connecting labels, hints, and errors.

Required fieldInline validationHint and disabled control

Responsive viewport — resize the window to explore. Direction and density apply only to this preview. Theme applies to the docs too.

field.tsx

"use client";

import { Field } from "@/components/ui/field";
import { Input } from "@dashboardpack/core/components/ui/input";
import { Button } from "@dashboardpack/core/components/ui/button";
import { useState } from "react";

export default function FieldExample() {
  const [name, setName] = useState("");
  const [submitted, setSubmitted] = useState(false);
  return (
    <form
      className="w-full max-w-sm space-y-5"
      noValidate
      onSubmit={(event) => {
        event.preventDefault();
        setSubmitted(true);
      }}
    >
      <Field
        label="Workspace name"
        required
        hint="Use at least two characters."
        error={
          submitted && name.trim().length < 2
            ? "Enter a workspace name with at least two characters."
            : undefined
        }
      >
        {(control) => (
          <Input
            {...control}
            value={name}
            onChange={(event) => setName(event.target.value)}
            placeholder="Apex Studio"
          />
        )}
      </Field>
      <Field label="Organization ID" hint="Assigned by your administrator.">
        {(control) => (
          <Input {...control} disabled defaultValue="org_apex_001" />
        )}
      </Field>
      <Button type="submit">Validate workspace</Button>
      {submitted && name.trim().length >= 2 && (
        <p role="status" className="text-sm text-muted-foreground">
          Workspace name is valid.
        </p>
      )}
    </form>
  );
}

Usage

Render a native labelable control through the children function and spread the provided control props onto it. The wrapper creates stable ids and description/error links. Keep value and validation in the consuming form.

Import

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

Shipped as editable source in src/components/ui/field.tsx in both apps. Copy the implementation below when moving it to another project. Copy the complete example from Source code for all imports and state. Add "use client" when using hooks or event handlers. See installation and theming for project setup.

Component source

The complete implementation is included in both apps. It uses the React, Radix, Lucide, and shared-core dependencies already installed in Apex. Keep your project’s semantic theme tokens when reusing it.

src/components/ui/field.tsx

"use client";
import { useId, type ReactNode } from "react";
import { Label } from "@dashboardpack/core/components/ui/label";
import { cn } from "@dashboardpack/core/lib/utils";
export interface FieldControlProps {
  id: string;
  required?: boolean;
  "aria-describedby"?: string;
  "aria-invalid"?: boolean;
}
export interface FieldProps {
  label: ReactNode;
  children: (control: FieldControlProps) => ReactNode;
  id?: string;
  hint?: ReactNode;
  error?: ReactNode;
  required?: boolean;
  className?: string;
}
export function Field({
  label,
  children,
  id,
  hint,
  error,
  required,
  className,
}: FieldProps) {
  const generated = useId();
  const controlId = id ?? generated;
  const description =
    [hint ? `${controlId}-hint` : "", error ? `${controlId}-error` : ""]
      .filter(Boolean)
      .join(" ") || undefined;
  return (
    <div className={cn("space-y-2", className)}>
      <Label htmlFor={controlId}>
        {label}
        {required && (
          <span aria-hidden className="ms-1 text-destructive">
            *
          </span>
        )}
      </Label>
      {children({
        id: controlId,
        required,
        "aria-describedby": description,
        "aria-invalid": error ? true : undefined,
      })}
      {hint && (
        <p
          id={`${controlId}-hint`}
          className="text-xs leading-relaxed text-muted-foreground"
        >
          {hint}
        </p>
      )}
      {error && (
        <p
          role="alert"
          id={`${controlId}-error`}
          className="text-xs text-destructive"
        >
          {error}
        </p>
      )}
    </div>
  );
}

API reference

Common props and defaults. Slot-specific props are named below; native elements also accept their standard HTML attributes. The component TypeScript definitions are the complete type reference.

Field props
Prop	Type / Default	Description
label	`ReactNode` Default: required	Visible control label.
children	`(control: FieldControlProps) => ReactNode` Default: required	Render and spread the supplied control props.
hint / error	`ReactNode` Default: —	Supporting instructions or validation failure.
required	`boolean` Default: false	Mark the label and control as required.
id	`string` Default: generated	Optional stable control id.

Build with these too

Form Input NativeSelect