Fieldset

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

Basic

Workspace details

Name

URL slug

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" legendMagnitude="md" bordered={false}>
      <InputField
        magnitude="md"
        orientation="vertical"
        name="name"
        label="Name"
        placeholder="Acme Inc."
      />
      <InputField
        magnitude="md"
        orientation="vertical"
        name="slug"
        label="URL slug"
        placeholder="acme"
      />
    </Fieldset>
  );
}

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.

Company

Tax ID

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"
      legendMagnitude="md"
      bordered={true}
      description="Enter your billing information below."
    >
      <InputField
        magnitude="md"
        orientation="vertical"
        name="company"
        label="Company"
        placeholder="Acme Inc."
      />
      <InputField
        magnitude="md"
        orientation="vertical"
        name="taxId"
        label="Tax ID"
        placeholder="US-123"
      />
    </Fieldset>
  );
}

Legend sizes

legendMagnitude controls the size of the legend text: md, lg, or xl.

Workspace details

Name

Workspace details

Name

Workspace details

Name

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">
      <Fieldset legend="Workspace details" legendMagnitude="md" bordered={false}>
        <InputField
          magnitude="md"
          orientation="vertical"
          name="name-md"
          label="Name"
          placeholder="Acme Inc."
        />
      </Fieldset>
      <Fieldset legend="Workspace details" legendMagnitude="lg" bordered={false}>
        <InputField
          magnitude="md"
          orientation="vertical"
          name="name-lg"
          label="Name"
          placeholder="Acme Inc."
        />
      </Fieldset>
      <Fieldset legend="Workspace details" legendMagnitude="xl" bordered={false}>
        <InputField
          magnitude="md"
          orientation="vertical"
          name="name-xl"
          label="Name"
          placeholder="Acme Inc."
        />
      </Fieldset>
    </div>
  );
}

Installation

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

Props

Fieldset

Prop	Type	Required	Description
children	ReactNode	No	The grouped controls.
render	ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, {}>	No	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.
bordered	NonNullable<boolean \| null \| undefined>	Yes	Whether a visible border wraps the group.
description	ReactNode	No	Supporting text shown below the legend.
legend	ReactNode	Yes	The legend text labelling the group.
legendMagnitude	"md" \| "lg" \| "xl"	Yes	Legend text size.