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 { FormControl, 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 }}>
        <FormControl>
          <FormControl.Label>Email</FormControl.Label>
          <Select name="animal" placeholder="Select an animal">
            <Select.Option value="dog">Dog</Select.Option>
            <Select.Option value="turtle">Turtle</Select.Option>
          </Select>
        </FormControl>
      </div>
    </Reshaped>
  );
}