Propel

Fieldset

Groups related fields under one accessible legend for the 90% case.

Workspace details
Show code
import { Fieldset } from "@makeplane/propel/components/fieldset";
import { InputField } from "@makeplane/propel/components/input-field";

export default function BasicDemo() {
  return (
    <Fieldset legend="Workspace details" legendSize="lg" bordered={false}>
      <InputField
        size="lg"
        orientation="vertical"
        name="name"
        label="Name"
        placeholder="Acme Inc."
      />
      <InputField
        size="lg"
        orientation="vertical"
        name="slug"
        label="URL slug"
        placeholder="acme"
      />
    </Fieldset>
  );
}

Installation

import { Fieldset } from "@makeplane/propel/components/fieldset";

Usage

import { Fieldset } from "@makeplane/propel/components/fieldset";
import { InputField } from "@makeplane/propel/components/input-field";

export default function BasicDemo() {
  return (
    <Fieldset legend="Workspace details" legendSize="lg" bordered={false}>
      <InputField
        size="lg"
        orientation="vertical"
        name="name"
        label="Name"
        placeholder="Acme Inc."
      />
      <InputField
        size="lg"
        orientation="vertical"
        name="slug"
        label="URL slug"
        placeholder="acme"
      />
    </Fieldset>
  );
}

Examples

Bordered

A bordered fieldset draws a visible boundary around the group, useful when it sits among other content. Pair it with a description for supporting text below the legend.

Billing details

Enter your billing information below.

Show code
import { Fieldset } from "@makeplane/propel/components/fieldset";
import { InputField } from "@makeplane/propel/components/input-field";

export default function BorderedDemo() {
  return (
    <Fieldset
      legend="Billing details"
      legendSize="lg"
      bordered={true}
      description="Enter your billing information below."
    >
      <InputField
        size="lg"
        orientation="vertical"
        name="company"
        label="Company"
        placeholder="Acme Inc."
      />
      <InputField
        size="lg"
        orientation="vertical"
        name="taxId"
        label="Tax ID"
        placeholder="US-123"
      />
    </Fieldset>
  );
}

Legend sizes

legendSize controls the size of the legend text: lg, xl, or 2xl.

Workspace details
Workspace details
Workspace details
Show code
import { Fieldset } from "@makeplane/propel/components/fieldset";
import { InputField } from "@makeplane/propel/components/input-field";

export default function LegendSizesDemo() {
  return (
    <div className="flex flex-col items-start gap-6">
      {(["lg", "xl", "2xl"] as const).map((legendSize) => (
        <Fieldset
          key={legendSize}
          legend="Workspace details"
          legendSize={legendSize}
          bordered={false}
        >
          <InputField
            size="lg"
            orientation="vertical"
            name={`name-${legendSize}`}
            label="Name"
            placeholder="Acme Inc."
          />
        </Fieldset>
      ))}
    </div>
  );
}

API Reference

Fieldset

The ready-made fieldset: groups a `legend` with its related controls for the 90% case. Grafts Base UI's `Fieldset` behavior onto propel's styled parts — pass the legend text, `legendSize`, and whether the group is `bordered`; everything else flows through to the underlying fieldset root.

PropTypeDefaultDescription
bordered(required)NonNullable<boolean | null | undefined>—Whether a visible border wraps the group.
legend(required)ReactNode—The legend text labelling the group.
legendSize(required)"lg" | "xl" | "2xl"—Text size for the legend block — the legend and, when present, its description.
childrenReactNode—The grouped controls.
renderReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>—Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
descriptionReactNode—Supporting text shown below the legend.