Reshaped Autocomplete

Forms

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 { Badge, Reshaped, View } from "reshaped/bundle";
import Autocomplete from "@/components/ui/reshaped-autocomplete";

export default function Demo() {
  const options = ["Salad", "Quinoa", "Beans"];

  return (
    <Reshaped theme="slate">
      <div style={{ margin: "0 auto", padding: 24, display: "flex", justifyContent: "center" }}>
        <View width="280px">
          <Autocomplete
            name="food"
            placeholder="Pick your favorite food"
            startSlot={[
              <Badge size="small" key="cinnamon">Cinnamon bun</Badge>,
              <Badge size="small" key="pasta">Pasta</Badge>,
              <Badge size="small" key="ice-cream">Ice-cream</Badge>,
              <Badge size="small" key="pizza">Pizza</Badge>,
            ]}
            defaultValue="Pineapple"
            multiline
          >
            {options.map((option) => {
              return (
                <Autocomplete.Item key={option} value={option}>
                  {option}
                </Autocomplete.Item>
              );
            })}
          </Autocomplete>
        </View>
      </div>
    </Reshaped>
  );
}