Fieldset

Forms

About

A semantic fieldset wrapper with a styled legend for grouping related form inputs, built on Base UI with native disabled support and screen-reader announcements.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Fieldset to your project and fits it to your theme.

Code

How Fieldset is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Fieldset, FieldsetLegend } from "@/components/ui/fieldset";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function FieldsetDemo() {
  return (
    <Fieldset className="flex w-full flex-col gap-6">
      <FieldsetLegend>Billing Details</FieldsetLegend>
      <div className="flex flex-col gap-2">
        <Label htmlFor="company">Company</Label>
        <Input id="company" placeholder="Enter company name" type="text" />
        <p className="text-sm text-muted-foreground">
          The name that will appear on invoices.
        </p>
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="tax-id">Tax ID</Label>
        <Input
          id="tax-id"
          placeholder="Enter tax identification number"
          type="text"
        />
        <p className="text-sm text-muted-foreground">
          Your business tax identification number.
        </p>
      </div>
    </Fieldset>
  );
}