Input

A single-line text field framed by a bordered group with room for inline icon slots.

Basic

Show code

import { Input, InputGroup } from "@makeplane/propel/components/input";

export default function BasicDemo() {
  return (
    <InputGroup magnitude="md">
      <Input magnitude="md" aria-label="Name" placeholder="Ada Lovelace" />
    </InputGroup>
  );
}

Magnitudes

The magnitude axis scales the control’s height and text size; keep it in sync on the InputGroup and its Input.

Show code

import { Input, InputGroup } from "@makeplane/propel/components/input";

export default function MagnitudesDemo() {
  return (
    <div className="flex w-72 flex-col gap-3">
      <InputGroup magnitude="md">
        <Input magnitude="md" aria-label="Medium" placeholder="Medium" />
      </InputGroup>
      <InputGroup magnitude="lg">
        <Input magnitude="lg" aria-label="Large" placeholder="Large" />
      </InputGroup>
      <InputGroup magnitude="xl">
        <Input magnitude="xl" aria-label="Extra large" placeholder="Extra large" />
      </InputGroup>
    </div>
  );
}

With icons

Show code

import { Icon } from "@makeplane/propel/components/icon";
import { Input, InputGroup } from "@makeplane/propel/components/input";
import { Mail, Search } from "lucide-react";

export default function WithIconsDemo() {
  return (
    <InputGroup magnitude="md">
      <Icon icon={Search} tint="secondary" magnitude="md" />
      <Input magnitude="md" aria-label="Search" placeholder="Search people" />
      <Icon icon={Mail} tint="secondary" magnitude="md" />
    </InputGroup>
  );
}

In a field

Work email

Enter a valid email address.

Show code

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

export default function InAFieldDemo() {
  return (
    <Field name="email" invalid>
      <FieldLabel magnitude="md" inset={false}>
        Work email
      </FieldLabel>
      <InputGroup magnitude="md">
        <Input magnitude="md" defaultValue="not-an-email" />
      </InputGroup>
      <FieldError magnitude="md" match={true}>
        Enter a valid email address.
      </FieldError>
    </Field>
  );
}

Installation

import { Input, InputGroup } from "@makeplane/propel/components/input";

Props

Input

Prop	Type	Required	Description
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.
magnitude	"md" \| "lg" \| "xl"	Yes