Reshaped Autocomplete

Forms 7

About

Renders a TextField and a list of suggested values using Autocomplete.Item compound components. The list is shown when the user focuses the field and hidden once they select a value. Supports filtering, custom item composition with slots, multiline start slot and FormControl integration.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Reshaped Autocomplete to your project and fits it to your theme.

Code

How Reshaped Autocomplete is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import { Reshaped } from "reshaped/bundle";
import type { AutocompleteProps } from "reshaped/bundle";
import Autocomplete from "@/components/ui/reshaped-autocomplete";

export default function Demo() {
  const [value, setValue] = React.useState("");
  const options = ["Pizza", "Pie", "Ice-cream"];
  const handleChange: AutocompleteProps["onChange"] = (args) =>
    setValue(args.value);

  return (
    <Reshaped theme="slate">
      <div style={{ maxWidth: 360, width: "100%", margin: "0 auto", padding: 24 }}>
        <Autocomplete
          name="fruit"
          placeholder="Pick your food"
          value={value}
          onChange={handleChange}
        >
          {options.map((option) => (
            <Autocomplete.Item key={option} value={option}>
              {option}
            </Autocomplete.Item>
          ))}
        </Autocomplete>
      </div>
    </Reshaped>
  );
}