Fieldset

A native fieldset element with an easily stylable legend.

Shipping Address

Full Name

Street Address

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

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

      <Field>
        <FieldLabel>Full Name</FieldLabel>
        <Input placeholder="John Doe" />
      </Field>

      <Field>
        <FieldLabel>Street Address</FieldLabel>
        <Input placeholder="123 Main Street" />
      </Field>
    </Fieldset>
  );
}

npx shadcn@latest add @roiui/fieldset

npx shadcn@latest add @roiui/fieldset-tailwind

<Fieldset>
  <FieldsetLegend />
</Fieldset>