Forms & Inputs·Available inReact Vue Angular·View as Markdown

Preview

example.tsxtsx

Quantity

Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.

Playground

Flip props to see how the component responds. The snippet below updates as you change options.

Quantity

Installation

Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.

$ pnpm add @sisyphos-ui/react

Then import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";

Usage

Idiomatic usage in each supported framework

example.tsx

import { useState } from "react";
import { NumberInput } from "@sisyphos-ui/react";

export const Quantity = () => {
  const [n, setN] = useState(1);
  return <NumberInput label="Quantity" value={n} onChange={setN} min={1} step={1} />;
};

With currency prefix

`prefix` + `precision` format money-shaped values.

example.tsxtsx

Monthly budget

With suffix

Put units after the value with `suffix`.

example.tsxtsx

Weight

Error state

Track validation yourself and toggle `error` on the control.

example.tsxtsx

Seats

At least 1 seat is required.

API

Prop	Type	Default	Description
value	number \| null	—	Controlled numeric value.
defaultValue	number \| null	—	Initial uncontrolled value.
onChange	(next: number \| null) => void	—	Called with the next numeric value or `null` when the field is empty.
min	number	—	Lower bound; values below it are clamped.
max	number	—	Upper bound; values above it are clamped.
step	number	1	Step amount for stepper buttons and arrow keys.
precision	number	0	Decimal places shown when formatted.
locale	string	—	BCP 47 locale tag for `Intl.NumberFormat`. Defaults to the runtime locale; pass an explicit string for a fixed format.
numberFormatOptions	Intl.NumberFormatOptions	—	Custom `Intl.NumberFormat` options (overrides `precision` when set).
withStepper	boolean	true	Render +/- stepper buttons.
prefix	ReactNode	—	Slot rendered before the value (e.g. `$`).
suffix	ReactNode	—	Slot rendered after the value (e.g. `TL`, `kg`).
variant	"standard" \| "outlined" \| "underline"	"outlined"	Visual treatment, mirrors `<Input>`.
size	"sm" \| "md" \| "lg"	"md"	Field height + typography scale.
label	string	—	Field label rendered above the input.
error	boolean	false	Marks the field as invalid for styling and ARIA.
errorMessage	string	—	Message shown below the field when `error` is true.
fullWidth	boolean	false	Stretch the input to its container width.

The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.

Accessibility

Stepper buttons carry descriptive aria-labels and a tabIndex={-1} so keyboard focus stays on the input.
aria-invalid mirrors error; the error message is announced with role="alert".

Keyboard interactions

Key	Action
`ArrowUp`	Increments by `step`.
`ArrowDown`	Decrements by `step`.
`PageUp`then`PageDown`	Coarse increment / decrement (10× step).

Need more?View on npm →