number input and select

2026-01-23 20:02:00 +02:00
parent d69fde8902
commit 9fab5f220d
2 changed files with 105 additions and 0 deletions
@@ -0,0 +1,22 @@
+interface Props {
+  value: number
+  min?: number
+  max?: number
+  onChange: (value: number) => void
+  className?: string
+  style?: React.CSSProperties
+  'aria-label'?: string
+}
+
+export default function NumberInput({ value, min = 0, max = 999, onChange, className, style, 'aria-label': ariaLabel }: Props) {
+  const clamp = (n: number) => Math.min(max, Math.max(min, n))
+
+  return (
+    <div className={`cv-number ${className || ''}`} style={style}
+      role="spinbutton" aria-valuenow={value} aria-valuemin={min} aria-valuemax={max} aria-label={ariaLabel}>
+      <button className="cv-number-btn" onClick={() => onChange(clamp(value - 1))} type="button" disabled={value <= min} aria-label="Decrease">-</button>
+      <span className="cv-number-value">{value}</span>
+      <button className="cv-number-btn" onClick={() => onChange(clamp(value + 1))} type="button" disabled={value >= max} aria-label="Increase">+</button>
+    </div>
+  )
+}