InputNumber

Basic usage#

<InputNumber name="my-input" />

Default value#

<InputNumber defaultValue={10} name="my-input" />

Hide stepper#

<InputNumber hideStepper name="my-input" />

Min & Max#

<InputNumber min={0} max={100} name="my-input" />

Step#

<InputNumber step={5} name="my-input" />

Step with decimals#

<InputNumber step={0.01} name="my-input" />

Enable wheel change#

<InputNumber enableWheelChange name="my-input" />

Display formatter#

<InputNumber displayFormatter={new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })} name="my-input" />

Custom controls#

<InputNumber
  name="my-input"
  renderPrefix={({ inputId, decrease }: RenderFixNumberPropParam) => (
    <button
      aria-controls={inputId}
      aria-label="Increase"
      className="jarl-input-number__stepper-button"
      onClick={() => decrease?.()}
      tabIndex={-1}
      type="button"
    >
      -
    </button>
  )}
  renderSuffix={({ inputId, increase }: RenderFixNumberPropParam) => (
    <button
      aria-controls={inputId}
      aria-label="Increase"
      className="jarl-input-number__stepper-button"
      onClick={() => increase?.()}
      tabIndex={-1}
      type="button"
    >
      +
    </button>
  )}
/>