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 — lg 32 / xl 36 / 2xl 40 px. The text Input family starts at lg; there is no 20, 24, or 28px Input frame. Other bordered controls go lower — Autocomplete starts at md and NumberField at 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 { AtSign, Search } from "lucide-react";

export default function WithIconsDemo() {
  return (
    <InputField
      size="lg"
      orientation="vertical"
      label="Search members"
      placeholder="Search…"
      startIcon={<Icon icon={Search} tint="placeholder" />}
      endIcon={<Icon icon={AtSign} 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)"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 `required`.
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} />`.