Component reference
NumberInput
Choose a number of seats and see the resulting quantity.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Team seats
$12 per seat, billed monthly. Add up to eight seats from this plan.
Use the steppers or the arrow keys.
Width adapts to the available space
"use client";
import { useState } from "react";
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
NumberInput,
Badge
} from "@pimolu/react";
function SeatPicker() {
const [seats, setSeats] = useState<number | null>(5);
const total = (seats ?? 0) * 12;
return (
<Card>
<CardHeader>
<CardTitle>Team seats</CardTitle>
<CardDescription>
$12 per seat, billed monthly. Add up to eight seats from this
plan.
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid gap-5 min-w-0">
<NumberInput
label="Number of seats"
value={seats}
onValueChange={setSeats}
min={1}
max={8}
step={1}
helperText="Use the steppers or the arrow keys."
/>
<div className="flex flex-wrap items-center gap-3 min-w-0">
<Badge variant={seats ? "primary" : "neutral"}>
{seats ?? 0} seats
</Badge>
<span className="text-sm text-muted leading-relaxed">
${total.toFixed(2)} / month
</span>
</div>
</div>
</CardContent>
</Card>
);
}
export function DemoExample() {
return (<SeatPicker />);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Sizes
sm, md and lg share the Input height scale.
Prefix, suffix and precision
The visible text is a formatted string, so affixes and decimals stay readable. Typing a comma as the decimal separator also works.
Bounds and keyboard
Arrow keys step by `step`; Page Up and Page Down step ten times; Home and End jump to min and max when provided. Blur clamps out-of-range values.
Usage
Use min/max/step appropriate to the domain and validate submitted values independently.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluNumberInputProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
value | number | null | undefined | — | Controlled numeric value. `null` represents an empty field. |
defaultValue | number | null | undefined | — | Initial value when uncontrolled. |
onValueChange | ((value: number | null) => void) | undefined | — | Called with the next numeric value, or `null` when emptied. |
min | number | undefined | — | Smallest allowed value. Applied on blur and when stepping. |
max | number | undefined | — | Largest allowed value. Applied on blur and when stepping. |
step | number | undefined | 1 | Increment used by the steppers and the arrow keys. Defaults to 1. |
precision | number | undefined | the decimals found in `step`, so a step of `0.25` keeps two decimals | Maximum number of decimal places. Defaults to the decimals found in `step`, so a step of `0.25` keeps two decimals. |
showSteppers | boolean | undefined | true | Render the increment/decrement buttons. Defaults to true. |
label | ReactNode | — | Visible label, associated with the text input. |
helperText | ReactNode | — | Supporting text below the field. |
errorMessage | ReactNode | — | Error text, replacing the helper text. |
invalid | boolean | undefined | false | Invalid state without an error message. |
prefix | ReactNode | — | Content rendered before the value (currency, unit, ...). |
suffix | ReactNode | — | Content rendered after the value (unit, duration, ...). |
fullWidth | boolean | undefined | false | Stretch to the parent width. |
size | PimoluNumberInputSize | undefined | "md" | Visual size. Defaults to "md". |
className | string | undefined | — | Class applied to the outer field. |
incrementLabel | string | undefined | — | Accessible name of the increment button. |
decrementLabel | string | undefined | — | Accessible name of the decrement button. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLInputElement> | undefined | — | Standard React/HTML attribute. |
disabled | boolean | undefined | — | Standard React/HTML attribute. |
name | string | undefined | — | Standard React/HTML attribute. |
required | boolean | undefined | — | Standard React/HTML attribute. |
valuenumber | null | undefinedNo default extracted.
Controlled numeric value. `null` represents an empty field.
defaultValuenumber | null | undefinedNo default extracted.
Initial value when uncontrolled.
onValueChange((value: number | null) => void) | undefinedNo default extracted.
Called with the next numeric value, or `null` when emptied.
minnumber | undefinedNo default extracted.
Smallest allowed value. Applied on blur and when stepping.
maxnumber | undefinedNo default extracted.
Largest allowed value. Applied on blur and when stepping.
stepnumber | undefinedDefault: 1
Increment used by the steppers and the arrow keys. Defaults to 1.
precisionnumber | undefinedDefault: the decimals found in `step`, so a step of `0.25` keeps two decimals
Maximum number of decimal places. Defaults to the decimals found in `step`, so a step of `0.25` keeps two decimals.
showSteppersboolean | undefinedDefault: true
Render the increment/decrement buttons. Defaults to true.
labelReactNodeNo default extracted.
Visible label, associated with the text input.
helperTextReactNodeNo default extracted.
Supporting text below the field.
errorMessageReactNodeNo default extracted.
Error text, replacing the helper text.
invalidboolean | undefinedDefault: false
Invalid state without an error message.
prefixReactNodeNo default extracted.
Content rendered before the value (currency, unit, ...).
suffixReactNodeNo default extracted.
Content rendered after the value (unit, duration, ...).
fullWidthboolean | undefinedDefault: false
Stretch to the parent width.
sizePimoluNumberInputSize | undefinedDefault: "md"
Visual size. Defaults to "md".
classNamestring | undefinedNo default extracted.
Class applied to the outer field.
incrementLabelstring | undefinedNo default extracted.
Accessible name of the increment button.
decrementLabelstring | undefinedNo default extracted.
Accessible name of the decrement button.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLInputElement> | undefinedNo default extracted.
Standard React/HTML attribute.
disabledboolean | undefinedNo default extracted.
Standard React/HTML attribute.
namestring | undefinedNo default extracted.
Standard React/HTML attribute.
requiredboolean | undefinedNo default extracted.
Standard React/HTML attribute.
Accessibility
- Name increment/decrement actions and test typed values as well as the stepper buttons.