Number Input

The Number Input component provides a numeric text field with stepper buttons for incrementing and decrementing values.

Basic Usage

import { NumInput } from "@paramanu/forms-react"

export default function App() {
  return <NumInput />
}

<div class="pm-num-input pm-num-input--outline pm-num-input--md">
  <input class="pm-input pm-input--outline pm-input--md" type="number" inputmode="numeric" />
  <div class="pm-num-input__stepper">
    <button type="button" class="pm-num-input__increment" aria-label="Increment">&#9650;</button>
    <button type="button" class="pm-num-input__decrement" aria-label="Decrement">&#9660;</button>
  </div>
</div>

With Min/Max

import { NumInput } from "@paramanu/forms-react"

export default function App() {
  return <NumInput min={0} max={100} step={5} />
}

<div class="pm-num-input pm-num-input--outline pm-num-input--md">
  <input class="pm-input pm-input--outline pm-input--md" type="number" min="0" max="100" step="5" />
  <div class="pm-num-input__stepper">
    <button type="button" class="pm-num-input__increment" aria-label="Increment">&#9650;</button>
    <button type="button" class="pm-num-input__decrement" aria-label="Decrement">&#9660;</button>
  </div>
</div>

Accessibility

Feature	Detail
Stepper buttons	Labeled with `aria-label` “Increment” / “Decrement”
`aria-invalid`	Applied when `invalid` is true
Keyboard	Arrow keys adjust the value within min/max bounds

Best Practices

Set min and max when the valid range is known.
Provide a visible label for the input.

Props

Prop	Type	Default	Description
`variant`	`"outline" \| "filled" \| "unstyled"`	`"outline"`	Visual variant
`size`	`"xs" \| "sm" \| "md" \| "lg"`	`"md"`	Input size
`invalid`	`boolean`	`false`	Invalid state
`disabled`	`boolean`	`false`	Disabled state
`min`	`number`	-	Minimum value
`max`	`number`	-	Maximum value
`step`	`number`	`1`	Step increment

CSS Classes

Class	Description
`pm-num-input`	Wrapper base class
`pm-num-input__stepper`	Stepper container
`pm-num-input__increment`	Increment button
`pm-num-input__decrement`	Decrement button