Panel Field Group

1
2
3import type { ReactNode } from 'react';

import { PanelFieldGroup } from '@/registry/bases/base-ui/components/layout/panel-field-group';

Installation#

pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/panel-field-group.json

Usage#

import { PanelFieldGroup } from '@/components/layout/panel-field-group';

<PanelFieldGroup cols={2}>
  <Field>
    <FieldLabel htmlFor="x">X</FieldLabel>
    <Input id="x" defaultValue="0" />
  </Field>
  <Field>
    <FieldLabel htmlFor="y">Y</FieldLabel>
    <Input id="y" defaultValue="0" />
  </Field>
</PanelFieldGroup>

Omit cols for one column, or pass a grid-cols-* class directly, which replaces the template. Use it for paired or tripled inputs (X + Y, W + H) in a property panel; for a single row that also needs a trailing action, wrap it in Panel Row instead.

API reference#

PanelFieldGroup#

Renders a div and takes every prop a div takes, plus:

Column count, written to the --cols CSS variable the grid template reads, so a count known only at runtime (cols={axes.length}) works. Omit it for one column, or pass a grid-cols-* class, which replaces the template. It sets data-slot="panel-field-group".