Field

A static layout family for composing labeled form controls with consistent vertical spacing

A static layout family for composing labeled form controls, modeled on shadcn's Field. It reads no frame and holds no state — colors come from the resolved theme, and all motion belongs to whatever you place inside it.

The nesting order is FieldGroup ▸ Field ▸ FieldLabel / FieldControl / FieldDescription.

Installation

$ pnpm dlx shadcn@latest add @remocn/field

Usage

FieldControl is a relative, fixed-height slot. The remocn-ui controls position themselves absolutely, so they need that slot to sit in — put input and button inside FieldControl rather than directly inside Field.

tsx

// src/Root.tsx
import { Composition } from "remotion";
import {
  Field,
  FieldControl,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/remocn/field";
import { Input } from "@/components/remocn/input";
 
const FormScene = () => (
  <FieldGroup gap={16}>
    <Field>
      <FieldLabel>Email</FieldLabel>
      <FieldControl>
        <Input state="idle" value="jane@acme.com" />
      </FieldControl>
      <FieldDescription>We'll never share your email.</FieldDescription>
    </Field>
  </FieldGroup>
);
 
export const RemotionRoot = () => (
  <Composition
    id="Field"
    component={FormScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

FieldGroup

Stacks fields vertically.

Prop	Type	Default
childrenrequired	ReactNode— The Field elements to stack.
gap	number16 Vertical gap between fields in pixels.
style	CSSProperties— Style overrides merged onto the group container.

childrenrequiredReactNode
The Field elements to stack.
gapnumber
Vertical gap between fields in pixels.
Default16
styleCSSProperties
Style overrides merged onto the group container.

Field

One label, control, and description grouped together.

Prop	Type	Default
childrenrequired	ReactNode— Typically a FieldLabel, a FieldControl, and an optional FieldDescription.
gap	number6 Vertical gap between the label, control, and description in pixels.
style	CSSProperties— Style overrides merged onto the field container.

childrenrequiredReactNode
Typically a FieldLabel, a FieldControl, and an optional FieldDescription.
gapnumber
Vertical gap between the label, control, and description in pixels.
Default6
styleCSSProperties
Style overrides merged onto the field container.

FieldLabel

Prop	Type	Default
childrenrequired	ReactNode— Label text shown above the control.
theme	Partial<RemocnTheme>— Theme overrides for the label's color.
style	CSSProperties— Style overrides merged onto the label.

childrenrequiredReactNode
Label text shown above the control.
themePartial<RemocnTheme>
Theme overrides for the label's color.
styleCSSProperties
Style overrides merged onto the label.

FieldControl

The relative, fixed-height slot the absolutely positioned controls live in.

Prop	Type	Default
childrenrequired	ReactNode— The remocn-ui control to host, such as input or button.
height	number40 Height of the slot in pixels. Match it to the control you are placing inside.
style	CSSProperties— Style overrides merged onto the slot.

childrenrequiredReactNode
The remocn-ui control to host, such as input or button.
heightnumber
Height of the slot in pixels. Match it to the control you are placing inside.
Default40
styleCSSProperties
Style overrides merged onto the slot.

FieldDescription

Prop	Type	Default
childrenrequired	ReactNode— Hint text shown beneath the control.
align	"start" \| "center""start" Horizontal alignment of the description text.
theme	Partial<RemocnTheme>— Theme overrides for the description's color.
style	CSSProperties— Style overrides merged onto the description.

childrenrequiredReactNode
Hint text shown beneath the control.
align"start" | "center"
Horizontal alignment of the description text.
Default"start"
themePartial<RemocnTheme>
Theme overrides for the description's color.
styleCSSProperties
Style overrides merged onto the description.