Fieldset

A native fieldset element with an easily stylable legend.

Shipping Address
import {
  Field,
  FieldControl,
  FieldLabel,
} from "@/components/ui/field/field";
import {
  Fieldset,
  FieldsetLegend,
} from "@/components/ui/fieldset/fieldset";
import styles from "./fieldset-demo.module.css";

export default function FieldsetDemo() {
  return (
    <Fieldset className={styles.fieldset}>
      <FieldsetLegend>Shipping Address</FieldsetLegend>

      <Field className={styles.field}>
        <FieldLabel>Full Name</FieldLabel>
        <FieldControl placeholder="John Doe" />
      </Field>

      <Field className={styles.field}>
        <FieldLabel>Street Address</FieldLabel>
        <FieldControl placeholder="123 Main Street" />
      </Field>
    </Fieldset>
  );
}
npx shadcn@latest add https://roiui.com/r/fieldset.json
anatomy
<Fieldset>
  <FieldsetLegend />
</Fieldset>