InputNumber

Introduction

The InputNumber component is a versatile numeric input with increment/decrement buttons, supporting various layouts, sizes, validation states, and full reactivity via Pulse signals. It is ideal for quantity selectors, forms, booking flows, and any scenario requiring controlled numeric input.

Import

import { InputNumber } from '@odyssee/components';

LiveCodeEditor Examples

Basic InputNumber

Code Éditable

Résultat

Reactive Value

Code Éditable

Résultat

Variants

Code Éditable

Résultat

Sizes

Code Éditable

Résultat

Min, Max & Step

Code Éditable

Résultat

States: Error, Disabled, Readonly, Required, Hint

Code Éditable

Résultat

Props Table

Prop	Type	Default	Description
value	number | Signal<number>	—	Numeric value (can be reactive signal).
min	number	—	Minimum allowed value.
max	number	—	Maximum allowed value.
step	number	1	Increment/decrement step.
variant	"default" | "vertical" | "horizontal" | "mini"	"default"	Layout variant for the component.
label	string	—	Label displayed above the input.
description	string	—	Optional description below the label.
error	string	—	Error message displayed below the input.
hint	string	—	Optional hint text below the input.
size	"xs" | "sm" | "md" | "lg" | "xl"	"md"	Size of the input and buttons.
disabled	boolean	false	Disables the input and buttons.
readonly	boolean	false	Makes the input read-only.
required	boolean	false	Marks the input as required.
onChange	(value: number) => void	—	Callback fired when the value changes.
className	string	—	Additional CSS classes for the root element.
name	string	—	Name attribute for form integration.
id	string	auto-gen	Unique ID for the input number element.
...rest	any	—	Other props are spread to the root element.

Implementation Notes

• Fully reactive: supports Pulse signals for value and state.
• Increment/decrement buttons are disabled at min/max boundaries.
• Supports multiple layout variants: default, vertical, horizontal, mini.
• Validation states (error, required, disabled, readonly) affect styling and accessibility.
• Step can be fractional for decimal inputs.
• Label, description, hint, and error are styled for clarity and accessibility.
• Size prop adjusts input and button dimensions.

Accessibility

• Uses native <input type="number"> for full accessibility.
• Buttons are keyboard-accessible and include ARIA labels.
• Error and hint messages are announced via text.
• Disabled and readonly states are visually and programmatically indicated.
• Label is linked via for and id attributes.

Best Practices

• Use min, max, and step to constrain input and guide user interaction.
• Prefer signals for reactive value management in forms.
• Use variants to match UI context (vertical for forms, mini for compact controls).
• Provide clear labels and descriptions for context.
• Use validation states to guide user input and improve UX.
• Avoid disabling unless necessary; provide visual cues if disabled.

Related Links

• Input component
• FormGroup component
• Pulse Framework documentation