Fieldset
Groups related fields under a shared legend. Install Fieldset from the VLLNT UI registry with the shadcn CLI.
Groups related fields under a shared legend. Part of the form family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Preview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
Add Fieldset to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/fieldset.jsonSource
import * as React from "react";
import { cn } from "../../lib/utils";
/** Groups related fields under a shared legend. */
export type FieldsetProps = React.ComponentPropsWithoutRef<"fieldset">;
const Fieldset = ({
className,
ref,
...props
}: FieldsetProps & { ref?: React.Ref<HTMLFieldSetElement> }) => (
<fieldset
className={cn("flex min-w-0 flex-col gap-4 disabled:opacity-50", className)}
data-slot="fieldset"
ref={ref}
{...props}
/>
);
Fieldset.displayName = "Fieldset";
/** Caption that names the purpose of a Fieldset. */
export type FieldsetLegendProps = React.ComponentPropsWithoutRef<"legend">;
const FieldsetLegend = ({
className,
ref,
...props
}: FieldsetLegendProps & { ref?: React.Ref<HTMLLegendElement> }) => (
<legend
className={cn("text-sm font-medium leading-none", className)}
data-slot="fieldset-legend"
ref={ref}
{...props}
/>
);
FieldsetLegend.displayName = "FieldsetLegend";
/** Body wrapper that spaces the controls inside a Fieldset. */
export type FieldsetContentProps = React.ComponentPropsWithoutRef<"div">;
const FieldsetContent = ({
className,
ref,
...props
}: FieldsetContentProps & { ref?: React.Ref<HTMLDivElement> }) => (
<div
className={cn("flex flex-col gap-4", className)}
data-slot="fieldset-content"
ref={ref}
{...props}
/>
);
FieldsetContent.displayName = "FieldsetContent";
export { Fieldset, FieldsetContent, FieldsetLegend };
Stories
Explore every variant and state in the interactive Storybook:
Preview
Switch between light and dark to inspect the embedded Storybook preview.