Home/Components/Fieldset

Fieldset Component

Group related form fields together with a legend, responsive column layout, and built-in loading skeleton.

Live Preview

Basic

Account Settings

Username

Phone

Responsive 2-column (md+)

Profile

Username

Phone

Loading state

Loading…

Usage

import { Fieldset, type FieldsetItem } from '@featherstudio/react-daisyui-kit';

const items: FieldsetItem[] = [
  { label: 'Email',    content: <input type="email" className="input input-bordered w-full" /> },
  { label: 'Username', content: <input type="text"  className="input input-bordered w-full" /> },
];

export default function App() {
  return (
    <Fieldset
      legend="Account Settings"
      items={items}
      colSpan={{ xs: 1, md: 2 }}
    />
  );
}

Features

Items-based API

Pass an array of FieldsetItem objects — each with a label and content node.

Responsive Columns

Control column count per breakpoint via colSpan (xs / sm / md / lg / xl).

Loading Skeleton

Set loading to replace content with a skeleton placeholder automatically.

Flexible Direction

Use direction to switch label/content layout between row and column per breakpoint.

FieldsetItem Type

Field	Type	Required	Description
label	string	Yes	Label text displayed above the field content
content	ReactNode	No	Any React node to render as the field value or control
inputProps	InputHTMLAttributes	No	Native input props when rendering a bare input element

Props

Prop	Type	Default	Description
items	FieldsetItem[]	-	List of field definitions to render (required)
legend	string	-	Optional legend / title for the fieldset group
colSpan	FieldsetColSpan	1 col	Responsive grid column count — keys: xs / sm / md / lg / xl
loading	boolean	false	Show a loading skeleton instead of items
direction	FieldsetDirection	-	Per-breakpoint flex direction for the label/content pair ('row' \| 'col')
className	string	-	Additional classes forwarded to the fieldset element

← Back to Components