NumberInput

import { NumberInput } from '@yarcl/react';

Guests

Between 1 and 12 people.

Price

Saved as 12.50.

<Field label="Guests" description="Between 1 and 12 people.">
  <NumberInput min={1} max={12} defaultValue={2} />
</Field>

<Field label="Price">
  <NumberInput value={price} onValueChange={setPrice} min={0} step={0.5} />
</Field>

• The value is a number, or null when the input is empty. Use value and onValueChange to control it, or defaultValue to leave it uncontrolled.
• Typed text is committed on blur or Enter: it’s clamped to min and max, and text that isn’t a number reverts to the last value. Inside a form, the first Enter commits the typed text without submitting; a second Enter submits the form.
• size, radius and color work like Input. They share a base height unless either component overrides it, and color sets the focus border and ring. Defaults come from components.NumberInput, then defaults.
• Inside a Field it’s labelled, described and marked invalid automatically.

Accessibility

• The input has the spinbutton role with aria-valuenow, aria-valuemin and aria-valuemax.
• ArrowUp and ArrowDown step by step, PageUp and PageDown by ten steps, and Home and End jump to min and max.
• The stepper buttons are labelled (incrementLabel, decrementLabel) and left out of the tab order, since the arrow keys do the same. Clicking them keeps focus where it was.

Props

Accepts every native <input> attribute except color, size, type, value, defaultValue, onChange, min, max and step, which are replaced by the props below. className and style apply to the outer box; everything else goes to the input.

Prop	Type	Default	Description
color	Colorconfig	config.defaults.color	Semantic color, from the colors config.
decrementLabel	string	config.labels.decrease	Accessible label of the decrement button.
defaultValue	number | null	null	Initial value when uncontrolled.
incrementLabel	string	config.labels.increase	Accessible label of the increment button.
max	number		Highest allowed value. Typed values are clamped to it, and End jumps to it.
min	number		Lowest allowed value. Typed values are clamped to it, and Home jumps to it.
onValueChange	(value: number | null) => void		Called with the new value after a step, or when typed text is committed on blur or Enter. The first Enter commits without submitting a form; a second Enter submits it.
radius	'size' | Radiusconfig	config.defaults.radius	Border radius, from the radii config, or 'size' for the radius named like the control's size.
size	'lg' | 'xs' | 'sm' | 'md' | 'xl'	config.defaults.size	Control size, from the sizes config.
step	number	1	Amount added or removed by the stepper buttons and the arrow keys. PageUp and PageDown step ten times as far.
value	number | null		Controlled value. null means the input is empty.