A native fieldset element with an easily stylable legend.
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<Fieldset>
  <FieldsetLegend />
</Fieldset>