NumberInput

NumberInput keeps browser-native number behavior while providing cleaner numeric input rhythm, subtle spin-button grouping, and consistent invalid and focus states.

#Default usage

<VStack align="stretch" gap={12} fullWidth>
  <NumberInput aria-label="Seats" defaultValue={12} min={0} step={1} />
  <NumberInput aria-label="Budget" defaultValue={1250} min={0} step={50} />
</VStack>

#Import

import { NumberInput, VStack } from "@froggdesign/enter-ui-react";

#States

<VStack align="stretch" gap={12} fullWidth>
  <NumberInput aria-label="Invalid seats" invalid defaultValue={-1} min={0} step={1} />
  <NumberInput aria-label="Read-only quota" defaultValue={42} min={0} disabled />
</VStack>

#Unrestricted decimals

Use step="any" to accept decimal values without step validation. The increase and decrease buttons move by one unit while preserving the fractional part and respecting min and max. Controlled inputs receive the updated value through onChange.

<NumberInput aria-label="Quantity" defaultValue={4.5} min={0} max={10} step="any" />

#Accessibility

NumberInput renders native input type="number". Provide a visible label or aria-label. Use invalid when validation fails. Use Stepper when the interface needs explicit plus/minus button controls and tighter step boundaries.

#API

• invalid maps to invalid styling and aria-invalid.
• inputMode defaults to decimal and can be overridden.
• Supports native number input props and className.

#Styling

Uses .eui-number-input in addition to the base .eui-input class, with tabular numerals, subtle spin-button rail, and ring-driven focus states.