# Digitexa UI > Open-source, copy-paste React components for dense, warm desktop interfaces (Next.js, Tailwind CSS v4, Radix). Components are installed as source files with the `dx` CLI and styled only with semantic --dx-* tokens. ## field Form field layout that wires label, description and error ids to the control. Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add field` Also adds: label, utils, theme npm: @radix-ui/react-slot@^1.5.0 ```tsx import { Field, FieldLabel, FieldControl, FieldDescription, FieldError, FieldGroup, useField } from "@/components/ui/field"; ``` ### Example ```tsx import * as React from "react"; import { Button } from "@/components/ui/button"; import { Checkbox } from "@/components/ui/checkbox"; import { Field, FieldControl, FieldDescription, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field"; import { Input } from "@/components/ui/input"; import { Textarea } from "@/components/ui/textarea"; export default function Demo() { const [key, setKey] = React.useState("WEB"); const error = /^[A-Z]{2,5}$/.test(key) ? null : "Use 2–5 uppercase letters."; return (

e.preventDefault()}> Project name Shown in the sidebar and in notifications. Issue key setKey(e.target.value)} className="w-32 font-mono" /> Prefix for issue ids, like {key || "WEB"}-142. {error} Summary

</FieldControl>
        </Field>
        <Field orientation="horizontal">
          <FieldControl>
            <Checkbox defaultChecked />
          </FieldControl>
          <FieldLabel>Notify watchers on status changes</FieldLabel>
        </Field>
        <div>
          <Button variant="primary" type="submit" disabled={!!error}>
            Create project
          </Button>
        </div>
      </FieldGroup>
    </form>
  );
}
```

### Source: ui/field.tsx

```tsx
"use client";

import * as React from "react";
import { Slot } from "@radix-ui/react-slot";

import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";

/*
 * Form field: label, control, description and error, with the ids wired for you.
 *
 *   <Field invalid={!!error}>
 *     <FieldLabel>Project name</FieldLabel>
 *     <FieldControl><Input /></FieldControl>
 *     <FieldDescription>Shown in the sidebar.</FieldDescription>
 *     <FieldError>{error}</FieldError>
 *   </Field>
 *
 * FieldControl passes id, aria-describedby and aria-invalid to its child. For custom
 * controls, spread useField().controlProps instead. A rendered FieldError marks the field invalid.
 */

type FieldContextValue = {
  id: string;
  descriptionId: string;
  errorId: string;
  invalid: boolean;
  hasDescription: boolean;
  hasError: boolean;
  register: (part: "description" | "error") => () => void;
};

const FieldContext = React.createContext<FieldContextValue | null>(null);

type FieldProps = React.ComponentProps<"div"> & {
  /** Marks the control invalid. Defaults to true while a FieldError is rendered. */
  invalid?: boolean;
  /** Places label and control side by side, for checkboxes and switches. */
  orientation?: "vertical" | "horizontal";
  /** Id for the control; generated when omitted. */
  controlId?: string;
};

const value: FieldContextValue = {
    id,
    descriptionId: `${autoId}-description`,
    errorId: `${autoId}-error`,
    invalid: invalid ?? parts.error > 0,
    hasDescription: parts.description > 0,
    hasError: parts.error > 0,
    register,
  };

return (
    <FieldContext.Provider value={value}>
      <div
        data-slot="field"
        data-orientation={orientation}
        data-invalid={value.invalid || undefined}
        className={cn(
          "flex gap-1.5",
          orientation === "vertical" ? "flex-col" : "flex-row flex-wrap items-center gap-x-2.5 [&>[data-slot=field-description],&>[data-slot=field-error]]:basis-full",
          className,
        )}
        {...props}
      />
    </FieldContext.Provider>
  );
}

function FieldLabel({ className, htmlFor, ...props }: React.ComponentProps<typeof Label>) {
  const { id } = useField();
  return <Label data-slot="field-label" htmlFor={htmlFor ?? id} className={className} {...props} />;
}

/** Passes id, aria-describedby and aria-invalid to its only child. */
function FieldControl(props: React.ComponentProps<typeof Slot>) {
  const { controlProps } = useField();
  return <Slot data-slot="field-control" {...controlProps} {...props} />;
}

/** Renders only when it has children, so `<FieldError>{error}</FieldError>` is safe. */
function FieldError({ children, ...props }: React.ComponentProps<"p">) {
  if (children == null || children === false || children === "") return null;
  return <FieldErrorMessage {...props}>{children}</FieldErrorMessage>;
}

/** Stacks several fields with consistent spacing. */
function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="field-group" className={cn("flex flex-col gap-4", className)} {...props} />;
}

export { Field, FieldLabel, FieldControl, FieldDescription, FieldError, FieldGroup, useField, type FieldProps };
```
</article></body></html>

Field

Installation

Usage

Field

Installation

Usage