NumberField

The props declared for NumberField, generated from the types @proyecto-viviana/ui ships.

Import

import { NumberField } from "@proyecto-viviana/ui";

Props

Props for NumberField in @proyecto-viviana/ui
Prop	Type	Default	Description
`size`	'S' \| 'M' \| 'L' \| 'XL'	—	The size of the number field.
`styles`	StyleString	—	Spectrum-defined generated classes.
`UNSAFE_className`	string	—	Additional CSS class name. Use only as a last resort.
`UNSAFE_style`	JSX.CSSProperties	—	Additional inline styles. Use only as a last resort.
`class`	string	—	Backward-compatible class alias. Prefer UNSAFE_className for S2 parity.
`label`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Label text for the input.
`description`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Description text shown below the input.
`errorMessage`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Error message shown when invalid.
`hideStepper`	false \| true	—	Whether to hide the stepper buttons.
`labelPosition`	'top' \| 'side'	—	Position of the label relative to the input.
`labelAlign`	'start' \| 'end'	—	Text alignment for side labels.
`necessityIndicator`	'label' \| 'icon'	—	Whether required fields show an icon or text label.
`prefix`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	An icon or text rendered before the input.
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components
`id`	string	—	The ID of the number field. solidaria
`onBlur`	JSX.EventHandler<HTMLInputElement, FocusEvent>	—	Handler for blur events. solidaria
`onChange`	(value: number) => void	—	Handler called when the value changes. solidaria-components
`onCopy`	JSX.EventHandler<HTMLInputElement, ClipboardEvent>	—	Handler for copy events. solidaria
`onCut`	JSX.EventHandler<HTMLInputElement, ClipboardEvent>	—	Handler for cut events. solidaria
`onFocus`	JSX.EventHandler<HTMLInputElement, FocusEvent>	—	Handler for focus events. solidaria
`onKeyDown`	JSX.EventHandler<HTMLInputElement, KeyboardEvent>	—	Handler for key down events. solidaria
`onKeyUp`	JSX.EventHandler<HTMLInputElement, KeyboardEvent>	—	Handler for key up events. solidaria
`onPaste`	JSX.EventHandler<HTMLInputElement, ClipboardEvent>	—	Handler for paste events. solidaria
`aria-describedby`	string	—	The element ID that describes the number field. solidaria
`aria-label`	string	—	An accessible label for the number field. solidaria
`aria-labelledby`	string	—	The element ID that labels the number field. solidaria
`isDisabled`	false \| true	—	Whether the number field is disabled. solidaria
`autoFocus`	false \| true	—	Whether to auto-focus the input. solidaria
`form`	string	—	The form element this input belongs to. solidaria
`name`	string	—	The name for the form input. solidaria
`value`	number	—	The current value (controlled). solidaria-components
`step`	number	—	The step value for increment/decrement. solidaria-components
`onFocusChange`	(isFocused: boolean) => void	—	Handler called when focus state changes. solidaria
`locale`	string	—	The locale for number formatting. solidaria-components
`validationState`	'valid' \| 'invalid'	—	Not yet documented solidaria
`defaultValue`	number	—	The default value (uncontrolled). solidaria-components
`minValue`	number	—	The minimum value. solidaria-components
`maxValue`	number	—	The maximum value. solidaria-components
`isReadOnly`	false \| true	—	Whether the number field is read-only. solidaria
`isInvalid`	false \| true	—	Whether the number field is invalid. solidaria
`isRequired`	false \| true	—	Whether the number field is required. solidaria
`validationBehavior`	'aria' \| 'native'	`"native"`	`"native"` sets the `required` attribute and omits `aria-required`. `"aria"` does the reverse. RAC `useNumberField` default is native. solidaria
`validate`	(value: number) => boolean \| string \| string[] \| null \| undefined	—	Custom validation function. solidaria
`isWheelDisabled`	false \| true	—	Whether to disable incrementing/decrementing from the mouse wheel. RAC `useNumberField` `isWheelDisabled`. solidaria
`decrementAriaLabel`	string	—	A custom aria-label for the decrement button. If not provided, the localized string "Decrease" is used. solidaria
`incrementAriaLabel`	string	—	A custom aria-label for the increment button. If not provided, the localized string "Increase" is used. solidaria
`formatOptions`	Intl.NumberFormatOptions	—	Number format options. solidaria-components
`commitBehavior`	'validate' \| 'snap'	`"snap"`	Controls blur commit: `'snap'` clamps to min/max/step, `'validate'` leaves the value and reports native range/step validity. solidaria

Declared in packages/viviana-ui/src/numberfield/index.tsx.

Props marked solidaria or solidaria-components come from the headless layer underneath and behave the same in both registers. Components that wrap a DOM element also accept that element's standard attributes, which are left out here on purpose — listing them would bury the props that are actually ours.