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 { Avatar, 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="account"
          placeholder="Select account"
          startSlot={
            <Avatar
              src="https://www.reshaped.so/img/examples/avatar-3.png"
              initials="P"
              size={5}
            />
          }
        >
          <Select.Option value="1">hello@reshaped.so</Select.Option>
          <Select.Option value="2">updates@reshaped.so</Select.Option>
        </Select>
      </div>
    </Reshaped>
  );
}