Primitives

Form

Form wrapper that coordinates field validation and returned errors.

Composition

The preferred shape for composing the installed primitive from its exported parts.

Root

Single-slot surface with no nested parts.

Form

The refined source installs this primitive from src/registry/sources/refined/ui/form.tsx. Install it on its own with the command above, or inspect the source below.

Registry command

npx shadcn@latest add http://127.0.0.1:3000/r/refined/form.json

See registry manifest

Raw code

Primary installed primitive source

Base UI Form slot

src/registry/sources/refined/ui/form.tsx

"use client";

import { Form as FormPrimitive } from "@base-ui/react/form";

import type { FormProps } from "@/components/refined-ui/contracts";

import { cn } from "@/components/refined-ui/lib/cn";

import { skinSlot } from "@/components/refined-ui/skin";

// Refined skin slot, 100% Base UI Form: thin <form> wrapper, consolidates validation across Fields.

// Merges external `errors` (server/action, keyed by Field.Root `name`) onto matching FieldError.

// Paints no control; composes any refined-ui Field standalone.

export function Form({ className, ...props }: FormProps) {

return (

<FormPrimitive

data-ui="agent"

data-slot="form"

className={cn("flex w-full flex-col gap-5", skinSlot("form", {}), className)}

{...props}

/>

);

}

Refined UI

Form

Composition

Root

Raw code