Propel

Field

The shared labeling and validation shell for composing a custom form control with a label, description, and error text.

Basic

Shown anywhere your profile is visible.

Show code
import { Field, FieldDescription, FieldLabel } from "@makeplane/propel/components/field";
import { Input } from "@makeplane/propel/components/input";

export default function BasicDemo() {
  return (
    <Field name="displayName">
      <FieldLabel magnitude="md" inset={false} required>
        Display name
      </FieldLabel>
      <Input magnitude="md" placeholder="Ada Lovelace" required />
      <FieldDescription magnitude="md">Shown anywhere your profile is visible.</FieldDescription>
    </Field>
  );
}

Magnitudes

Pass the same magnitude to every part of a field so the label, control, and description scale together.

Shown anywhere your profile is visible.

Shown anywhere your profile is visible.

Shown anywhere your profile is visible.

Show code
import {
  Field,
  FieldDescription,
  FieldLabel,
  type FieldMagnitude,
} from "@makeplane/propel/components/field";
import { Input } from "@makeplane/propel/components/input";

const MAGNITUDES: FieldMagnitude[] = ["md", "lg", "xl"];

export default function MagnitudesDemo() {
  return (
    <div className="flex flex-wrap items-start gap-8">
      {MAGNITUDES.map((magnitude) => (
        <Field key={magnitude} name={`displayName-${magnitude}`}>
          <FieldLabel magnitude={magnitude} inset={false} required>
            Display name ({magnitude})
          </FieldLabel>
          <Input magnitude={magnitude} placeholder="Ada Lovelace" required />
          <FieldDescription magnitude={magnitude}>
            Shown anywhere your profile is visible.
          </FieldDescription>
        </Field>
      ))}
    </div>
  );
}

Invalid

Choose a different workspace slug.
Show code
import { Field, FieldError, FieldLabel } from "@makeplane/propel/components/field";
import { Input } from "@makeplane/propel/components/input";

export default function InvalidDemo() {
  return (
    <Field name="workspaceSlug" invalid>
      <FieldLabel magnitude="md" inset={false}>
        Workspace slug
      </FieldLabel>
      <Input magnitude="md" defaultValue="Already taken" />
      <FieldError magnitude="md" match={true}>
        Choose a different workspace slug.
      </FieldError>
    </Field>
  );
}

Required validation

Native constraint validity drives FieldError through match; with validationMode="onBlur" the message appears when the user leaves the field empty and clears once a value is committed.

Visible on your profile.

Show code
import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@makeplane/propel/components/field";
import { Input } from "@makeplane/propel/components/input";

export default function RequiredValidationDemo() {
  return (
    <Field name="fullName" validationMode="onBlur">
      <FieldLabel magnitude="md" inset={false} required>
        Full name
      </FieldLabel>
      <Input magnitude="md" placeholder="Ada Lovelace" required />
      <FieldError magnitude="md" match="valueMissing">
        Enter your full name.
      </FieldError>
      <FieldDescription magnitude="md">Visible on your profile.</FieldDescription>
    </Field>
  );
}

Installation

import { Field, FieldDescription, FieldLabel } from "@makeplane/propel/components/field";
import { Input } from "@makeplane/propel/components/input";

Props

Field

PropTypeRequiredDescription
renderReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, FieldRootState>NoAllows 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.

FieldLabel

PropTypeRequiredDescription
renderReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, FieldLabelState>NoAllows 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.
magnitude"md" | "lg" | "xl"Yes
insetNonNullable<boolean | null | undefined>Yes
requiredbooleanNo