Autocomplete Field

A labeled autocomplete input with a filtered suggestion popup and helper or error text.

Basic

Container image

Type or choose an image tag.

Show code

import { AutocompleteField } from "@makeplane/propel/components/autocomplete-field";
import { Icon } from "@makeplane/propel/components/icon";
import { IconButton } from "@makeplane/propel/components/icon-button";
import { ChevronsUpDown, X } from "lucide-react";

const IMAGES = ["nginx:1.29-alpine", "node:22-slim", "postgres:18", "redis:8.2.2-alpine"];

export default function BasicDemo() {
  return (
    <AutocompleteField
      name="containerImage"
      label="Container image"
      description="Type or choose an image tag."
      magnitude="md"
      items={IMAGES}
      placeholder="e.g. node:22-slim"
      empty="No images found"
      clear={
        <IconButton
          prominence="ghost"
          tone="neutral"
          magnitude="md"
          aria-label="Clear container image"
          icon={<Icon icon={X} />}
        />
      }
      trigger={
        <IconButton
          prominence="ghost"
          tone="neutral"
          magnitude="md"
          aria-label="Open container image"
          icon={<Icon icon={ChevronsUpDown} />}
        />
      }
    />
  );
}

Magnitudes

magnitude steps the label, description, and helper-text size; the input group keeps its own fixed scale.

Type or choose an image tag.

Show code

import {
  AutocompleteField,
  type FieldMagnitude,
} from "@makeplane/propel/components/autocomplete-field";
import { Icon } from "@makeplane/propel/components/icon";
import { IconButton } from "@makeplane/propel/components/icon-button";
import { ChevronsUpDown, X } from "lucide-react";

const IMAGES = ["nginx:1.29-alpine", "node:22-slim", "postgres:18", "redis:8.2.2-alpine"];

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

export default function MagnitudesDemo() {
  return (
    <div className="flex flex-col gap-4">
      {MAGNITUDES.map((magnitude) => (
        <AutocompleteField
          key={magnitude}
          name="containerImage"
          label={magnitude}
          description="Type or choose an image tag."
          magnitude={magnitude}
          items={IMAGES}
          placeholder="e.g. node:22-slim"
          empty="No images found"
          clear={
            <IconButton
              prominence="ghost"
              tone="neutral"
              magnitude="md"
              aria-label="Clear container image"
              icon={<Icon icon={X} />}
            />
          }
          trigger={
            <IconButton
              prominence="ghost"
              tone="neutral"
              magnitude="md"
              aria-label="Open container image"
              icon={<Icon icon={ChevronsUpDown} />}
            />
          }
        />
      ))}
    </div>
  );
}

Invalid

Setting error marks the field invalid, recolors the input group border, and replaces the description with the error text.

Container image

Enter a container image.

Show code

import { AutocompleteField } from "@makeplane/propel/components/autocomplete-field";
import { Icon } from "@makeplane/propel/components/icon";
import { IconButton } from "@makeplane/propel/components/icon-button";
import { ChevronsUpDown, X } from "lucide-react";

const IMAGES = ["nginx:1.29-alpine", "node:22-slim", "postgres:18", "redis:8.2.2-alpine"];

export default function InvalidDemo() {
  return (
    <AutocompleteField
      name="containerImage"
      label="Container image"
      magnitude="md"
      items={IMAGES}
      placeholder="e.g. node:22-slim"
      empty="No images found"
      error="Enter a container image."
      clear={
        <IconButton
          prominence="ghost"
          tone="neutral"
          magnitude="md"
          aria-label="Clear container image"
          icon={<Icon icon={X} />}
        />
      }
      trigger={
        <IconButton
          prominence="ghost"
          tone="neutral"
          magnitude="md"
          aria-label="Open container image"
          icon={<Icon icon={ChevronsUpDown} />}
        />
      }
    />
  );
}

Disabled

Container image

Type or choose an image tag.

Show code

import { AutocompleteField } from "@makeplane/propel/components/autocomplete-field";
import { Icon } from "@makeplane/propel/components/icon";
import { IconButton } from "@makeplane/propel/components/icon-button";
import { ChevronsUpDown, X } from "lucide-react";

const IMAGES = ["nginx:1.29-alpine", "node:22-slim", "postgres:18", "redis:8.2.2-alpine"];

export default function DisabledDemo() {
  return (
    <AutocompleteField
      name="containerImage"
      label="Container image"
      description="Type or choose an image tag."
      magnitude="md"
      disabled
      items={IMAGES}
      placeholder="e.g. node:22-slim"
      empty="No images found"
      clear={
        <IconButton
          prominence="ghost"
          tone="neutral"
          magnitude="md"
          aria-label="Clear container image"
          icon={<Icon icon={X} />}
        />
      }
      trigger={
        <IconButton
          prominence="ghost"
          tone="neutral"
          magnitude="md"
          aria-label="Open container image"
          icon={<Icon icon={ChevronsUpDown} />}
        />
      }
    />
  );
}

Installation

import { AutocompleteField } from "@makeplane/propel/components/autocomplete-field";

Props

AutocompleteField

Prop	Type	Required	Description
description	ReactNode	No	Supporting text shown below the input. Replaced by `error` when an error is set.
clear	ReactElement<unknown, string \| JSXElementConstructor<any>>	Yes	The clear control (e.g. an `IconButton`) carrying its own localizable `aria-label`.
trigger	ReactElement<unknown, string \| JSXElementConstructor<any>>	Yes	The popup-trigger control (e.g. an `IconButton`) carrying its own localizable `aria-label`.
empty	ReactNode	Yes	Message rendered when no item matches.
error	ReactNode	No	Error text shown below the control.
hint	ReactNode	No	Helper text shown below the control. Replaced by `error` when an error is set.
items	readonly Value[]	Yes	Items rendered in the popup.
label	string	Yes	Visible field label.
magnitude	"md" \| "lg" \| "xl"	Yes	Label and helper text size.
placeholder	string	No	Input placeholder.