Forms & selection@neumorphism-ui/fieldset

Fieldset

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

@neumorphism-ui/fieldset

Registry JSON

Preview

Profile settings

Display name

Enter the name shown on your profile.

Installation

npx shadcn@latest add @neumorphism-ui/fieldset

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

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

Import

"use client";

import * as React from "react";
import { Field, FieldLabel, FieldControl, FieldDescription, FieldError } from "@/components/ui/field";
import { Fieldset, FieldsetLegend } from "@/components/ui/fieldset";

Example

export default function Example() {
  const [name, setName] = React.useState("Alex");
  const nameField = <Field name="displayName"><FieldLabel>{"Display name"}</FieldLabel><FieldControl required value={name} onValueChange={setName} /><FieldDescription>{"Enter the name shown on your profile."}</FieldDescription><FieldError match="valueMissing">{"Enter a name."}</FieldError></Field>;
  return (<Fieldset className="w-full max-w-sm"><FieldsetLegend>{"Profile settings"}</FieldsetLegend>{nameField}</Fieldset>);
}

API Reference

Component	Prop	Type	Default	Description
`Fieldset`	`disabled`	`boolean`	`—`	Disable user interaction.
`FieldsetLegend`	`children`	`React.ReactNode`	`—`	Name the group of related fields.
`Fieldset`	`className`	`string \| function`	`—`	Extend styling, optionally with a state callback.