Neumorphism UI

Fieldset

Use Fieldset to give a related set of form fields a shared, visible group name.

Preview

Profile settings group

A profile legend groups a required name field with help and validation text.

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/fieldset

Install the shared base once, then add components and their dependencies with the CLI.

Profile settings group

npx shadcn@latest add @neumorphism-ui/field @neumorphism-ui/fieldset
Registry JSON

Usage

Place FieldsetLegend first, then compose the individual Field controls beneath it. Keep each field's own label even when the group already has a legend.

"use client";

import { Field, FieldControl, FieldLabel } from "@/components/ui/field";
import { Fieldset, FieldsetLegend } from "@/components/ui/fieldset";

export default function Example() {
  return (
    <Fieldset>
      <FieldsetLegend>Profile settings</FieldsetLegend>
      <Field name="displayName">
        <FieldLabel>Display name</FieldLabel>
        <FieldControl defaultValue="Alex" />
      </Field>
    </Fieldset>
  );
}

API Reference

Group related controls under a shared legend and disabled state. Describe the group with FieldsetLegend and retain labels on individual controls.

ComponentPropTypeDefaultDescription
Fieldsetdisabledboolean—Disable user interaction.
FieldsetLegendchildrenReact.ReactNode—Name the group of related fields.
FieldsetclassNamestring | function—Extend styling, optionally with a state callback.

Accessibility

  • 01

    Describe the group with FieldsetLegend and retain labels on individual controls.

  • 02

    Preserve labels and visible focus when customizing render or className.