Components
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.
npx @21st-dev/cli add reshaped/reshaped-number-fieldLoading preview...
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>
);
}
Loading preview...
Loading preview...
Loading preview...