Input Field

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

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

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

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

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

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

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

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
      magnitude="md"
      orientation="vertical"
      label="Search members"
      placeholder="Search…"
      startIcon={<Icon icon={Search} tint="placeholder" />}
      endIcon={<Icon icon={AtSign} tint="placeholder" />}
    />
  );
}

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

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