Propel

Input Field

A labeled single-line text field with optional hint and error messaging.

We'll use this to send you receipts.

We'll never share your email.

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

export default function BasicDemo() {
  return (
    <InputField
      size="lg"
      orientation="vertical"
      label="Email"
      placeholder="you@example.com"
      description="We'll use this to send you receipts."
      hint="We'll never share your email."
    />
  );
}

Installation

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

Usage

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

export default function BasicDemo() {
  return (
    <InputField
      size="lg"
      orientation="vertical"
      label="Email"
      placeholder="you@example.com"
      description="We'll use this to send you receipts."
      hint="We'll never share your email."
    />
  );
}

Examples

Sizes

size sets the frame height, the value’s text size, and any inline glyph together — md 28 / lg 32 / xl 36 / 2xl 40 px. The label steps with it (body-xs through lg, body-sm above), and the description and hint sit one tier below the label (body-2xs, then body-xs). The text Input family starts at md (28px); there is no 20 or 24px Input frame. NumberField goes down to sm. See Sizing for which family exposes which rungs.

Show code
import { InputField, type InputSize } from "@makeplane/propel/components/input-field";

const SIZES: InputSize[] = ["lg", "xl", "2xl"];

export default function SizesDemo() {
  return (
    <div className="flex flex-col gap-4">
      {SIZES.map((size) => (
        <InputField
          key={size}
          size={size}
          orientation="vertical"
          label={size}
          placeholder="you@example.com"
        />
      ))}
    </div>
  );
}

Horizontal

The horizontal orientation places the label beside the control instead of above it.

Shown across your projects.

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

export default function HorizontalDemo() {
  return (
    <InputField
      size="lg"
      orientation="horizontal"
      label="Workspace name"
      placeholder="Acme Inc."
      hint="Shown across your projects."
    />
  );
}

With icons

Show code
import { Icon } from "@makeplane/propel/components/icon";
import { InputField } from "@makeplane/propel/components/input-field";
import { AtOutline, SearchOutline } from "@makeplane/propel/icons";

export default function WithIconsDemo() {
  return (
    <InputField
      size="lg"
      orientation="vertical"
      label="Search members"
      placeholder="Search…"
      startIcon={<Icon icon={SearchOutline} tint="placeholder" />}
      endIcon={<Icon icon={AtOutline} tint="placeholder" />}
    />
  );
}

Invalid

Enter a valid email address.
Show code
import { InputField } from "@makeplane/propel/components/input-field";

export default function InvalidDemo() {
  return (
    <InputField
      size="lg"
      orientation="vertical"
      label="Email"
      required
      defaultValue="not-an-email"
      error="Enter a valid email address."
    />
  );
}

Disabled

disabled mutes the whole field — label, control, and hint — and blocks input.

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

export default function DisabledDemo() {
  return (
    <InputField
      size="lg"
      orientation="vertical"
      label="Email"
      placeholder="you@example.com"
      disabled
    />
  );
}

API Reference

InputField

Single-line text field built on Base UI Field. Supports inline start/end slots and a horizontal orientation where the label sits beside the control.

PropTypeDefaultDescription
size(required)"md" | "lg" | "xl" | "2xl"—Size scale. lg | xl | 2xl.
orientation(required)"horizontal" | "vertical"—Label placement: vertical (label above) | horizontal (label beside).
requiredboolean—Marks the field required: adds a * asterisk and sets aria-required. The native required attribute is deliberately not rendered, so browser constraint validation never intercepts form submits ahead of the app's own validation.
labelstring—Label text shown above (or beside) the control.
descriptionReactNode—Supporting text shown directly below the label.
hintReactNode—Helper text shown below the control. Replaced by error when an error is set.
errorReactNode—Error text shown below the control. Overrides hint and marks the field invalid (danger border).
startIconReactNode—Element rendered at the inline start of the control, e.g. <Icon icon={Search} />.
endIconReactNode—Element rendered at the inline end of the control, e.g. <Icon icon={Mail} />.