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, View } from "reshaped/bundle";
import Select from "@/components/ui/reshaped-select";

const ActivityIcon = () => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
  </svg>
);

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ maxWidth: 320, width: "100%", margin: "0 auto", padding: 24 }}>
        <View gap={3}>
          <Select
            size="small"
            name="animal"
            placeholder="Select an animal"
            icon={<ActivityIcon />}
          >
            <Select.Option value="dog">Dog</Select.Option>
            <Select.Option value="turtle">Turtle</Select.Option>
          </Select>
          <Select
            size="medium"
            name="animal"
            placeholder="Select an animal"
            icon={<ActivityIcon />}
          >
            <Select.Option value="dog">Dog</Select.Option>
            <Select.Option value="turtle">Turtle</Select.Option>
          </Select>
          <Select
            size="large"
            name="animal"
            placeholder="Select an animal"
            icon={<ActivityIcon />}
          >
            <Select.Option value="dog">Dog</Select.Option>
            <Select.Option value="turtle">Turtle</Select.Option>
          </Select>
          <Select
            size="xlarge"
            name="animal"
            placeholder="Select an animal"
            icon={<ActivityIcon />}
          >
            <Select.Option value="dog">Dog</Select.Option>
            <Select.Option value="turtle">Turtle</Select.Option>
          </Select>
        </View>
      </div>
    </Reshaped>
  );
}