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

<div className="docs-preview-stack">
  <NumberInput aria-label="Seats" defaultValue={12} min={0} step={1} />
  <NumberInput aria-label="Budget" defaultValue={1250} min={0} step={50} />
</div>

#Import

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

#States

<div className="docs-preview-stack">
  <NumberInput aria-label="Invalid seats" invalid defaultValue={-1} min={0} step={1} />
  <NumberInput aria-label="Read-only quota" defaultValue={42} min={0} disabled />
</div>

#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.