FieldGroup

Overview

The FieldGroup component is used inside forms to visually group related fields under a common title.
It improves structure, accessibility, and scannability of complex forms.

---

Preview

Preview

Personal Information

Code

import FieldGroup from './components/ui/field-group';

export default function Demo() {
  return (
    <div className="p-4 border rounded-lg">
      <FieldGroup title="Personal Information" columns="3" spacing="normal" border={true}>
          <input type="text" placeholder="First Name" className="border border-gray-300 p-2 rounded-lg" />
          <input type="text" placeholder="Last Name" className="border border-gray-300 p-2 rounded-lg" />
      </FieldGroup>
    </div>
  );
}

---

Installation

npm

npx @mindfiredigital/ignix-ui add field-group

Yarn

yarn @mindfiredigital/ignix-ui add field-group

pnpm

pnpm @mindfiredigital/ignix-ui add field-group

manual

import React, { ReactNode } from "react";
import clsx from "clsx";

export type FieldGroupProps = {
title?: string;
columns?: "auto" | number;
spacing?: "none" | "small" | "normal" | "large" | number; 
border?: boolean;
children: ReactNode;
className?: string;
};

const spacingMap: Record<string, string> = {
none: "gap-0",
small: "gap-2",
normal: "gap-4",
large: "gap-6",
};

const FieldGroup: React.FC<FieldGroupProps> = ({
title,
columns = "auto",
spacing = "normal",
border = true,
children,
className,
}) => {
const gapStyle =
typeof spacing === "number"
  ? { gap: `${spacing}px` }
  : undefined;

return (
<fieldset
  className={clsx(
    "p-4 rounded-md",
    border ? "border border-gray-300 dark:border-gray-600" : "border-0",
    className
  )}
>
  {title && (
    <legend className="px-2 text-sm font-medium text-gray-700 dark:text-gray-200">
      {title}
    </legend>
  )}

  <div
    className={clsx(
      "grid",
      columns === "auto"
        ? "grid-cols-1 sm:grid-cols-2 md:grid-cols-3"
        : `grid-cols-${columns}`,
      typeof spacing === "string" ? spacingMap[spacing] : undefined
    )}
    style={gapStyle}
  >
    {children}
  </div>
</fieldset>
);
};

export default FieldGroup;

---

Variants

Preview

Personal Information

Full Name

Email Address

Code

<FieldGroup
  title="Personal Information"
  columns={"auto"}
  spacing="normal"
  border={true}
>
  <div>
    <label htmlFor="name">Full Name</label>
    <input id="name" type="text" placeholder="John Doe" />
  </div>
  <div>
    <label htmlFor="email">Email Address</label>
    <input id="email" type="email" placeholder="john@example.com" />
  </div>
</FieldGroup>

---

Usage Examples

Grouped Form Fields

<FieldGroup title="Login Details" border columns="auto">
  <input type="email" placeholder="Email Address" />
  <input type="password" placeholder="Password" />
</FieldGroup>

---

Without Border

<FieldGroup title="Preferences" border={false} columns="2">
  <label><input type="checkbox" /> Receive Newsletter</label>
  <label><input type="checkbox" /> Enable Dark Mode</label>
</FieldGroup>

---

Props

Prop	Type	Default	Description
title	string	null	Title of the group, rendered inside a <legend>
columns	"auto" | "1" | "2" | "3" ...	"auto"	Defines layout for fields (auto, fixed grid)
spacing	"none" | "tight" | "normal" | "loose"	"normal"	Controls spacing between fields
border	boolean	true	Toggles fieldset border
children	ReactNode	—	Form fields inside the group