Reshaped Select

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.

Rby reshaped

Install

npx @21st-dev/cli add reshaped/reshaped-select

Loading preview...

import { Reshaped } 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 }}>
        <Select
          variant="headless"
          name="animal"
          placeholder="Select an animal"
          icon={<ActivityIcon />}
        >
          <Select.Option value="dog">Dog</Select.Option>
          <Select.Option value="turtle">Turtle</Select.Option>
        </Select>
      </div>
    </Reshaped>
  );
}