# 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

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

## Props

| Prop                    | Type                      | Default                  | Description                                                                 |
| ----------------------- | ------------------------- | ------------------------ | --------------------------------------------------------------------------- |
| `value`                 | `string`                  | -                        | Current input value (decimal string).                                       |
| `onChange`              | `(value: string) => void` | -                        | Called whenever the input changes.                                          |
| `name`                  | `string`                  | `undefined`              | Name attribute for the input element.                                       |
| `placeholder`           | `string`                  | `undefined`              | Placeholder text.                                                           |
| `variant`               | `IntegerVariant`          | `IntegerVariant.UINT256` | Solidity integer type used for validation (signed/unsigned & bit length).   |
| `disableMultiplyBy1e18` | `boolean`                 | `false`                  | Hide the `× 1e18` helper button (useful when the value is not ETH-denoted). |
| `disabled`              | `boolean`                 | `undefined`              | Disables the input.                                                         |

## Live Examples

### Basic `uint256` with helper

<DocsProvider>
  <IntegerInputExample placeholder="Amount in ETH" />
</DocsProvider>

```tsx twoslash
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

<DocsProvider>
  <IntegerInputExample initialValue="-42" variant="INT64" placeholder="Signed int64" />
</DocsProvider>

```tsx twoslash
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

<DocsProvider>
  <IntegerInputExample placeholder="Token amount (no helper)" disableMultiplyBy1e18={true} />
</DocsProvider>

```tsx twoslash
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

<DocsProvider>
  <IntegerInputExample initialValue="1000000000000000000" disabled={true} />
</DocsProvider>

```tsx twoslash
import React from "react";
import { IntegerInput } from "@scaffold-ui/debug-contracts";

function DisabledInteger() {
  return (
    <IntegerInput
      value="1000000000000000000"
      onChange={() => {}}
      disabled={true}
    />
  );
}
```