Skip to content

IntegerInput Component

The IntegerInput component provides validation and UX helpers for Solidity integer parameters. It supports all int and uint bit-sizes, validates signed/unsigned ranges, and includes a quick × 1e18 helper for working with wei values.

Import

import { IntegerInput, IntegerVariant } from "@scaffold-ui/debug-contracts";

Props

PropTypeDefaultDescription
valuestring-Current input value (decimal string).
onChange(value: string) => void-Called whenever the input changes.
namestringundefinedName attribute for the input element.
placeholderstringundefinedPlaceholder text.
variantIntegerVariantIntegerVariant.UINT256Solidity integer type used for validation (signed/unsigned & bit length).
disableMultiplyBy1e18booleanfalseHide the × 1e18 helper button (useful when the value is not ETH-denoted).
disabledbooleanundefinedDisables the input.

Live Examples

Basic uint256 with helper

Multiply by 1e18 (wei)
import React, { useState } from "react";
import { IntegerInput } from "@scaffold-ui/debug-contracts";
 
function BasicUint256() {
  const [value, setValue] = useState("");
 
  return (
    <IntegerInput
      value={value}
      onChange={setValue}
      placeholder="Amount in ETH"
    />
  );
}

Signed integers

Multiply by 1e18 (wei)
import React, { useState } from "react";
import { IntegerInput, IntegerVariant } from "@scaffold-ui/debug-contracts";
 
function SignedInput() {
  const [value, setValue] = useState("-42");
 
  return (
    <IntegerInput
      value={value}
      onChange={setValue}
      variant={IntegerVariant.INT64}
      placeholder="Signed int64"
    />
  );
}

Hide the multiply helper

import React, { useState } from "react";
import { IntegerInput } from "@scaffold-ui/debug-contracts";
 
function NoHelper() {
  const [value, setValue] = useState("");
 
  return (
    <IntegerInput
      value={value}
      onChange={setValue}
      placeholder="Token amount (no helper)"
      disableMultiplyBy1e18
    />
  );
}

Disabled state

Multiply by 1e18 (wei)
import React from "react";
import { IntegerInput } from "@scaffold-ui/debug-contracts";
 
function DisabledInteger() {
  return (
    <IntegerInput
      value="1000000000000000000"
      onChange={() => {}}
      disabled={true}
    />
  );
}