Reshaped Number field

Numeric input with increase/decrease controls and keyboard arrow support, based on TextField so it inherits its variants and sizes. Works in controlled and uncontrolled modes, supports icons, and integrates with the FormControl utility for labels and status messages.

by reshaped

import { FormControl, Reshaped } from "reshaped/bundle";
import NumberField from "@/components/ui/reshaped-number-field";

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ maxWidth: 320, width: "100%", margin: "0 auto", padding: 24 }}>
        <FormControl>
          <FormControl.Label>Amount</FormControl.Label>
          <NumberField
            name="name"
            defaultValue={5}
            increaseAriaLabel="Increase value"
            decreaseAriaLabel="Decrease value"
          />
        </FormControl>
      </div>
    </Reshaped>
  );
}