Input

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

Show code

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

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

Installation

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

Usage

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

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

Examples

Sizes

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

Show code

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

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

export default function SizesDemo() {
  return (
    <div className="flex w-72 flex-col gap-3">
      {SIZES.map((size) => (
        <InputGroup key={size} size={size}>
          {/* These inputs have no visible label, so `aria-label` is the whole accessible name —
              it has to say what the field is for, not just which rung it is on. */}
          <Input size={size} aria-label={`Email (${size})`} placeholder={size} />
        </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 size="lg">
      <Icon icon={Search} tint="secondary" size="md" />
      <Input size="lg" aria-label="Search" placeholder="Search people" />
      <Icon icon={Mail} tint="secondary" size="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 size="lg" inset={false}>
        Work email
      </FieldLabel>
      <InputGroup size="lg">
        <Input size="lg" defaultValue="not-an-email" />
      </InputGroup>
      <FieldError size="lg" match={true}>
        Enter a valid email address.
      </FieldError>
    </Field>
  );
}

Disabled

disabled blocks interaction and mutes the control.

Show code

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

export default function DisabledDemo() {
  return (
    <InputGroup size="lg">
      <Input size="lg" aria-label="Name" placeholder="Ada Lovelace" disabled />
    </InputGroup>
  );
}

API Reference

Input

Single-line text field that automatically works inside `Field`. Base UI's `Input` control behavior grafted onto the styled `elements` `Input` element (rule 1a) — behavior part outer, styled part as the render target.

Prop	Type	Default	Description
size(required)	"lg" \| "xl" \| "2xl"	—
render	ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, {}>	—	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.

InputGroup

The bordered group that frames the input control and its inline slots.

Prop	Type	Default	Description
size(required)	"lg" \| "xl" \| "2xl"	—
render	ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, {}>	—	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.