Row

InstallationCopy Anchor Link

npx shadcn@latest add @formdef/row

Register it in the row structure slot in lib/formdef/index.tsx, as structure: { row: Row }. From then on every { row } entry of a layout renders through it.

UsageCopy Anchor Link

export const NameForm = createForm({
  schema: z.object({ firstName: z.string(), lastName: z.string() }),
  defaultValues: { firstName: '', lastName: '' },
  fields: {
    firstName: { widget: 'text', props: { label: 'First name' } },
    lastName: { widget: 'text', props: { label: 'Last name' } },
  },
  layout: [{ row: ['firstName', 'lastName'] }],
})

The row is a container query, not a breakpoint: it places its fields side by side once its own width reaches Tailwind's md container size, and stacks them below that. A row in a narrow sidebar stacks even on a wide screen.

The fields share the width equally. A className passed through the entry's props goes on the row's flex container.

PropsCopy Anchor Link

SourceCopy Anchor Link

import type { RowProps } from '@formdef/core'
import { cn } from 'cn'

type RowFrameProps = RowProps & {
  className?: string | undefined
}

export const Row = ({ children, className }: RowFrameProps) => (
  <div className="@container/field-row w-full">
    <div
      data-slot="field-row"
      className={cn('flex flex-col gap-4 @md/field-row:flex-row @md/field-row:*:flex-1', className)}
    >
      {children}
    </div>
  </div>
)