Primitives

Field

Form field wrapper for labels, descriptions, errors, and validity state.

Profile

Display name

Shown next to your messages.

We only use it for account recovery.

Composition

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

Parts

Exported compound parts from the installed source.

Field

├── FieldLabel

├── FieldControl

├── FieldDescription

├── FieldError

├── FieldGroup

├── FieldItem

├── FieldSet

└── FieldLegend

The refined source installs this primitive from src/registry/sources/refined/ui/field.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/field.json

See registry manifest

Raw code

Primary installed primitive source

Base UI Field slot

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

"use client";

import { Field as FieldPrimitive } from "@base-ui/react/field";

import { Fieldset as FieldsetPrimitive } from "@base-ui/react/fieldset";

import type { ComponentProps } from "react";

import type {

FieldControlProps,

FieldDescriptionProps,

FieldErrorProps,

FieldGroupProps,

FieldItemProps,

FieldLabelProps,

FieldLegendProps,

FieldProps,

FieldSetProps,

} 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 Field+Fieldset. Pure layout+text — never paints a control;

// consumer passes refined-ui Input/Select/Textarea via FieldControl's `render` prop.

// Base UI stamps data-valid/-invalid/-dirty/-touched/-filled/-focused so skins react w/o JS.

export function Field({ className, ...props }: FieldProps) {

return (

<FieldPrimitive.Root

data-ui="agent"

data-slot="field"

className={cn("flex flex-col gap-1.5", skinSlot("field", {}), className)}

{...props}

/>

);

}

export function FieldLabel({ className, ...props }: FieldLabelProps) {

return (

<FieldPrimitive.Label

data-ui="agent"

data-slot="field-label"

      className={cn("text-label font-medium text-foreground data-[disabled]:opacity-50", skinSlot("field-label", {}), className)}

{...props}

/>

);

}

// `render` type pulled from Base UI primitive so composed controls (Input/Select/Textarea) merge correctly.

type RefinedFieldControlProps = FieldControlProps & Pick<ComponentProps<typeof FieldPrimitive.Control>, "render">;

export function FieldControl({ className, ...props }: RefinedFieldControlProps) {

// Pass render={<Input/>} (or Select/Textarea) to merge field wiring; no render = bare <input>.

  return <FieldPrimitive.Control data-ui="agent" data-slot="field-control" className={cn("w-full", className)} {...props} />;

}

export function FieldDescription({ className, ...props }: FieldDescriptionProps) {

return (

<FieldPrimitive.Description

data-ui="agent"

data-slot="field-description"

className={cn("text-meta text-muted-foreground", skinSlot("field-description", {}), className)}

{...props}

/>

);

}

export function FieldError({ className, ...props }: FieldErrorProps) {

return (

<FieldPrimitive.Error

data-ui="agent"

data-slot="field-error"

className={cn("text-meta text-destructive", skinSlot("field-error", {}), className)}

{...props}

/>

);

}

export function FieldGroup({ className, ...props }: FieldGroupProps) {

// A vertical stack of Fields (not a Base UI part) — pure layout, no <fieldset> semantics.

return <div data-ui="agent" data-slot="field-group" className={cn("flex flex-col gap-5", className)} {...props} />;

}

export function FieldItem({ className, ...props }: FieldItemProps) {

// Base UI Field.Item: one labelled row in a Fieldset group (e.g. radio option); scopes label/description/validity.

return (

<FieldPrimitive.Item

data-ui="agent"

data-slot="field-item"

className={cn("flex items-center gap-2", skinSlot("field-item", {}), className)}

{...props}

/>

);

}

export function FieldSet({ className, ...props }: FieldSetProps) {

return (

<FieldsetPrimitive.Root

data-ui="agent"

data-slot="field-set"

className={cn("m-0 flex min-w-0 flex-col gap-4 border-0 p-0", skinSlot("field-set", {}), className)}

{...props}

/>

);

}

export function FieldLegend({ className, ...props }: FieldLegendProps) {

return (

<FieldsetPrimitive.Legend

data-ui="agent"

data-slot="field-legend"

className={cn("text-label font-semibold text-foreground", skinSlot("field-legend", {}), className)}

{...props}

/>

);

}

Refined UI

Field

Composition

Parts

Raw code