Fieldset

The Fieldset component provides a semantic way to group related form fields with optional title and subtitle. It supports both traditional stacked layouts and modern grid layouts for complex forms. The component is built on the native HTML fieldset element and includes legend support for accessibility.

import { Fieldset, FieldsetButtons } from "@crafted-ui/react";

Description

The main fieldset component that groups related form fields with optional title, subtitle, and layout options.

Usage

import { Fieldset, Field, FieldLabel, Input } from "@crafted-ui/react";

// Basic fieldset
<Fieldset title="Personal Information" subtitle="Tell us about yourself">
  <Field>
    <FieldLabel>Full Name</FieldLabel>
    <Input />
  </Field>
  <Field>
    <FieldLabel>Email</FieldLabel>
    <Input type="email" />
  </Field>
</Fieldset>

// Grid layout fieldset
<Fieldset title="Address" subtitle="Your address information" grid>
  <Field className="col-span-6">
    <FieldLabel>First Name</FieldLabel>
    <Input />
  </Field>
  <Field className="col-span-6">
    <FieldLabel>Last Name</FieldLabel>
    <Input />
  </Field>
  <Field>
    <FieldLabel>Street Address</FieldLabel>
    <Input />
  </Field>
</Fieldset>

Props

The Fieldset component accepts the following props:

Prop	Type	Default	Description
title	string	undefined	The fieldset’s title, displayed in the legend
subtitle	string	undefined	Additional descriptive text for the fieldset
grid	boolean	false	When true, uses a 12-column grid layout instead of stacked layout
className	string	undefined	Additional CSS class names
children	ReactNode	undefined	Form fields and other content

The component also accepts all standard HTML fieldset attributes.

Description

A specialized component for placing action buttons within a fieldset, with alignment options.

Usage

import { FieldsetButtons, Button } from "@crafted-ui/react";

<FieldsetButtons>
  <Button outline>Cancel</Button>
  <Button clr="primary">Save</Button>
</FieldsetButtons>

// Left-aligned buttons
<FieldsetButtons align="left">
  <Button clr="destructive">Delete</Button>
</FieldsetButtons>

// Center-aligned buttons
<FieldsetButtons align="center">
  <Button>Continue</Button>
</FieldsetButtons>

Props

The FieldsetButtons component accepts the following props:

Prop	Type	Default	Description
align	’left’ | ‘center’ | ‘right'	'right’	Alignment of buttons within the container
className	string	undefined	Additional CSS class names
children	ReactNode	undefined	Button components

Stacked Layout (Default)

The default layout stacks fields vertically with consistent spacing.

<Fieldset title="Contact Information">
  <Field>
    <FieldLabel>Name</FieldLabel>
    <Input />
  </Field>
  <Field>
    <FieldLabel>Email</FieldLabel>
    <Input type="email" />
  </Field>
</Fieldset>

Grid Layout

The grid layout uses a 12-column system for more complex forms. Fields span the full width by default but can be customized using className.

<Fieldset title="Billing Address" grid>
  <Field>
    <FieldLabel>Street Address</FieldLabel>
    <Input />
  </Field>
  <Field className="col-span-4">
    <FieldLabel>City</FieldLabel>
    <Input />
  </Field>
  <Field className="col-span-4">
    <FieldLabel>State</FieldLabel>
    <Input />
  </Field>
  <Field className="col-span-4">
    <FieldLabel>ZIP Code</FieldLabel>
    <Input />
  </Field>
</Fieldset>

Common Grid Patterns

Here are some common column span patterns for the 12-column grid:

• col-span-6: Half width (2 fields per row)
• col-span-4: One third width (3 fields per row)
• col-span-3: One quarter width (4 fields per row)
• col-span-8: Two thirds width
• col-span-9: Three quarters width
• col-span-full: Full width (default)

Right Aligned (Default)

Buttons are right-aligned by default, which follows common form conventions.

Left Aligned

Use left alignment for destructive actions or secondary workflows.

Center Aligned

Center alignment can be used for single-button actions or modal dialogs.

The Fieldset component follows accessibility best practices:

• Uses the semantic HTML <fieldset> element for proper grouping
• Includes a <legend> element when title is provided for screen reader context
• Maintains proper focus order within form fields
• Grid layouts maintain logical tab order

When implementing fieldsets:

1. Use descriptive titles that clearly identify the purpose of the field group
2. Include subtitles to provide additional context when helpful
3. Ensure logical tab order, especially in grid layouts
4. Group related fields together for better user experience

Registration Form

<Fieldset title="Create Account" subtitle="Sign up for a new account">
  <Field>
    <FieldLabel>Username</FieldLabel>
    <Input required />
  </Field>
  <Field>
    <FieldLabel>Email</FieldLabel>
    <Input type="email" required />
  </Field>
  <Field>
    <FieldLabel>Password</FieldLabel>
    <Input type="password" required />
  </Field>
  <FieldsetButtons>
    <Button clr="primary" type="submit">Create Account</Button>
  </FieldsetButtons>
</Fieldset>

Complex Grid Form

<Fieldset title="Employee Information" subtitle="Enter employee details" grid>
  <Field className="col-span-6">
    <FieldLabel>First Name</FieldLabel>
    <Input required />
  </Field>
  <Field className="col-span-6">
    <FieldLabel>Last Name</FieldLabel>
    <Input required />
  </Field>
  <Field className="col-span-8">
    <FieldLabel>Email</FieldLabel>
    <Input type="email" required />
  </Field>
  <Field className="col-span-4">
    <FieldLabel>Employee ID</FieldLabel>
    <Input />
  </Field>
  <Field>
    <FieldLabel>Department</FieldLabel>
    <Select>
      <option>Engineering</option>
      <option>Marketing</option>
      <option>Sales</option>
    </Select>
  </Field>
  <FieldsetButtons>
    <Button outline>Save Draft</Button>
    <Button clr="primary">Add Employee</Button>
  </FieldsetButtons>
</Fieldset>