Fieldset

PreviousNext

A native fieldset element with an easily stylable legend.

Docs
roiuiitem

Preview

Loading preview…
registry/brook/ui/fieldset/fieldset.tsx
"use client";

import { Fieldset } from "@base-ui/react/fieldset";
import { cn } from "@/lib/utils";
import styles from "./fieldset.module.css";

function FieldsetRoot({ className, ...props }: Fieldset.Root.Props) {
  return <Fieldset.Root className={cn(styles.root, className)} data-slot="fieldset-root" {...props} />;
}

function FieldsetLegend({ className, ...props }: Fieldset.Legend.Props) {
  return <Fieldset.Legend className={cn(styles.legend, className)} data-slot="fieldset-legend" {...props} />;
}

export { FieldsetRoot as Fieldset, FieldsetLegend };

Installation

npx shadcn@latest add @roiui/fieldset

Usage

import { Fieldset } from "@/components/fieldset"
<Fieldset />