sos-nextjs/components/form/numInput.js

import React from 'react'

import styles from './styles.module.css'

export default function Input({label, minimum = 0, maximum, error, hint, name, value, onChange, onBlur, isValid}){
  const current = parseInt(value, 10) || 0
  const nextUp = maximum !== undefined ? Math.min(current + 1, maximum) : current + 1
  const nextDown = minimum !== undefined ? Math.max(current - 1, minimum) : current - 1

  const valueUp = ()=>onChange({target: {value: nextUp + ""}})
  const valueDown = ()=>onChange({target: {value: nextDown + ""}})

  return (
    <div className={styles.formElementContainer}>
      <label htmlFor={name}>{label}:</label>
      <div className={styles.complexInput + ((isValid && !error)?'':' ' + styles.invalid)}>
        <button type="button" disabled={value===minimum} onClick={valueDown}>-</button>
        <input type="text" name={name} value={value} onChange={onChange} onBlur={onBlur} />
        <button type="button" disabled={value===maximum} onClick={valueUp}>+</button>
      </div>
      {hint && <span className={styles.hint}>{error || (isValid ? '' : hint)}</span>}
    </div>
  )
}