Reshaped Select

Forms

About

Form select rendering Select.Option components over a native select element, in controlled or uncontrolled mode. Supports a start content slot, consistent field icons, four sizes aligned with Button and TextField, faded and headless variants, error and disabled states, custom value rendering and FormControl integration.

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

Code

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

Usage.tsx

import { Reshaped } from "reshaped/bundle";
import Select from "@/components/ui/reshaped-select";

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ maxWidth: 320, width: "100%", margin: "0 auto", padding: 24 }}>
        <Select
          name="animal"
          placeholder="Select an animal"
          onChange={({ value }) => {
            /* Update your state here */
            console.log({ value });
          }}
          value="dog"
        >
          <Select.Option value="dog">Dog</Select.Option>
          <Select.Option value="turtle">Turtle</Select.Option>
        </Select>
      </div>
    </Reshaped>
  );
}