---
sidebar_position: 13
---

import Paper from "@site/src/components/paper";
import NumberInputDefault, {
  NumberInputPhoneNumber,
  NumberInputWithGap,
  NumberInputClearable,
  NumberInputWithNoGap,
} from "@site/src/components/number-input";

# NumberInput

A component for getting the user number input in a formatted way.

```tsx
"use client"; 

import { NumberInput } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Default

The default style of **NumberInput**.

<Paper className="block">
  <NumberInputDefault
    label="NumberInput"
    placeholder="Type your number"
    formatType="numeric"
  />
</Paper>

```tsx
"use client"; 

import { NumberInput, Input } from "rizzui";

export default function App() {
  return (
    <NumberInput
      formatType="numeric"
      placeholder="Type your number"
      customInput={Input as React.ComponentType<unknown>}
      {...{ label: "NumberInput" }}
    />
  );
}
```

<div className="mb-16" />

## With Prefix & Suffix

You can change the style of **NumberInput** with property **prefix** & **suffix**.

<Paper className="block">
  <NumberInputDefault
    label="Your Number"
    formatType="numeric"
    value="20000000"
    suffix=".00"
    prefix="$"
    displayType="input"
  />
</Paper>

```tsx
"use client"; 

import { NumberInput, Input } from "rizzui";

export default function App() {
  return (
    <NumberInput
      formatType="numeric"
      value="20000000"
      suffix=".00"
      prefix="$"
      displayType="input"
      customInput={Input as React.ComponentType<unknown>}
      {...{ label: "Number Input" }}
    />
  );
}
```

<div className="mb-16" />

## With Comma Separated

You can change the style of **NumberInput** with property **thousandSeparator**.

<Paper className="block">
  <NumberInputDefault
    label="Your Number"
    formatType="numeric"
    value="20000000"
    displayType="input"
    thousandSeparator=","
  />
</Paper>

```tsx
"use client"; 

import { NumberInput, Input } from "rizzui";

export default function App() {
  return (
    <NumberInput
      formatType="numeric"
      value="20000000"
      displayType="input"
      customInput={Input as React.ComponentType<unknown>}
      thousandSeparator=","
      {...{ label: "Number Input" }}
    />
  );
}
```

<div className="mb-16" />

## With Thousands Group Style

You can change the style of **NumberInput** with property **thousandsGroupStyle**.

<Paper className="grid grid-cols-1 sm:grid-cols-2 gap-6">
  <NumberInputDefault
    label="Your Number"
    formatType="numeric"
    value="20000000"
    displayType="input"
    thousandSeparator=","
    thousandsGroupStyle="none"
  />
  <NumberInputDefault
    label="Your Number"
    formatType="numeric"
    value="20000000"
    displayType="input"
    thousandSeparator=","
    thousandsGroupStyle="thousand"
  />
  <NumberInputDefault
    label="Your Number"
    formatType="numeric"
    value="20000000"
    displayType="input"
    thousandSeparator=","
    thousandsGroupStyle="lakh"
  />
  <NumberInputDefault
    label="Your Number"
    formatType="numeric"
    value="20000000"
    displayType="input"
    thousandSeparator=","
    thousandsGroupStyle="wan"
  />
</Paper>

```tsx
"use client"; 

import { NumberInput, Input } from "rizzui";

export default function App() {
  return (
    <>
      <NumberInput
        formatType="numeric"
        value="20000000"
        displayType="input"
        thousandSeparator=","
        thousandsGroupStyle="none"
        customInput={Input as React.ComponentType<unknown>}
        {...{ label: "Number Input" }}
      />
      <NumberInput
        formatType="numeric"
        value="20000000"
        displayType="input"
        thousandSeparator=","
        thousandsGroupStyle="thousand"
        customInput={Input as React.ComponentType<unknown>}
        {...{ label: "Number Input" }}
      />
      <NumberInput
        formatType="numeric"
        value="20000000"
        displayType="input"
        thousandSeparator=","
        thousandsGroupStyle="lakh"
        customInput={Input as React.ComponentType<unknown>}
        {...{ label: "Number Input" }}
      />
      <NumberInput
        formatType="numeric"
        value="20000000"
        displayType="input"
        thousandSeparator=","
        thousandsGroupStyle="wan"
        customInput={Input as React.ComponentType<unknown>}
        {...{ label: "Number Input" }}
      />
    </>
  );
}
```

<div className="mb-16" />

## Clearable

You can change the style of **NumberInput** with property **clearable** & **mask**.

<Paper className="block">
  <NumberInputClearable />
</Paper>

```tsx
"use client"; 

import React from "react";
import { NumberInput, Input, usePatternFormat, NumberInputProps } from "rizzui";

type CardExpiryType = NumberInputProps & {
  isMask?: boolean;
};

function CardExpiry({ isMask = false, ...props }: CardExpiryType) {
  const { format } = usePatternFormat({
    ...props,
    format: "##/##",
  });

  const _format = (val: string) => {
    let month = val.substring(0, 2);
    const year = val.substring(2, 4);

    if (month.length === 1 && parseInt(month[0]) > 1) {
      month = `0${month[0]}`;
    } else if (month.length === 2) {
      if (Number(month) === 0) {
        month = `01`;
      } else if (Number(month) > 12) {
        month = "12";
      }
    }
    return isMask ? format(`${month}${year}`) : `${month}/${year}`;
  };

  return <NumberInput {...props} format={_format} />;
}

export default function App() {
  const [inputValue, setInputValue] = React.useState("");

  return (
    <CardExpiry
      isMask={true}
      formatType="custom"
      mask="_"
      allowEmptyFormatting
      customInput={Input as React.ComponentType<unknown>}
      {...{
        value: inputValue,
        onChange: (e) => setInputValue(e.target.value),
        clearable: true,
        onClear: () => setInputValue(""),
        label: "Clearable",
      }}
    />
  );
}
```

<div className="mb-16" />

## With Custom Mask

You can change the style of **NumberInput** with property **mask**.

<Paper className="grid grid-cols-1 sm:grid-cols-2 gap-6">
  <NumberInputDefault
    mask="~"
    value="411111"
    formatType="pattern"
    label="Number Input"
    format="#### #### #### ####"
  />
  <NumberInputDefault
    mask="+"
    value="411111"
    formatType="pattern"
    label="Number Input"
    format="#### #### #### ####"
  />
</Paper>

```tsx
"use client"; 

import { NumberInput, Input } from "rizzui";

export default function App() {
  return (
    <>
      <NumberInput
        mask="~"
        value="411111"
        formatType="pattern"
        format="#### #### #### ####"
        customInput={Input as React.ComponentType<unknown>}
        {...{ label: "Number Input" }}
      />
      <NumberInput
        mask="+"
        value="411111"
        formatType="pattern"
        format="#### #### #### ####"
        customInput={Input as React.ComponentType<unknown>}
        {...{ label: "Number Input" }}
      />
    </>
  );
}
```

<div className="mb-16" />

## Credit Card Number With Mask

You can change the style of **NumberInput** with property **format** & **mask**.

<Paper className="block">
  <NumberInputDefault
    mask="_"
    value="411111"
    formatType="pattern"
    label="Credit Card Number"
    format="#### #### #### ####"
  />
</Paper>

```tsx
"use client"; 

import { NumberInput, Input } from "rizzui";

export default function App() {
  return (
    <NumberInput
      mask="_"
      value="411111"
      formatType="pattern"
      format="#### #### #### ####"
      customInput={Input as React.ComponentType<unknown>}
      {...{ label: "Credit Card Number" }}
    />
  );
}
```

<div className="mb-16" />

## Phone Number With Mask

You can change the style of **NumberInput** as phone number input.

<Paper className="block">
  <NumberInputPhoneNumber />
</Paper>

```tsx
"use client"; 

import { NumberInput, Input, usePatternFormat, NumberInputProps } from "rizzui";

export default function App() {
  return (
    <NumberInput
      formatType="pattern"
      format="+1 (###) ###-####"
      allowEmptyFormatting
      mask="_"
      customInput={Input as React.ComponentType<unknown>}
      {...{ label: "US Phone Number" }}
    />
  );
}
```

<div className="mb-16" />

## Credit Card Input With Gap

You can use credit card input of **NumberInput** with gap.

<Paper className="block">
  <NumberInputWithGap />
</Paper>

```tsx
"use client"; 

import { NumberInput, Input, usePatternFormat, NumberInputProps } from "rizzui";

type CardExpiryType = NumberInputProps & {
  isMask?: boolean;
};

export default function App() {
  function CardExpiry({ isMask = false, ...props }: CardExpiryType) {
    const { format } = usePatternFormat({
      ...props,
      format: "##/##",
    });
    const _format = (val: string) => {
      let month = val.substring(0, 2);
      const year = val.substring(2, 4);

      if (month.length === 1 && parseInt(month[0]) > 1) {
        month = `0${month[0]}`;
      } else if (month.length === 2) {
        if (Number(month) === 0) {
          month = "01";
        } else if (Number(month) > 12) {
          month = "12";
        }
      }
      return isMask ? format(`${month}${year}`) : `${month}/${year}`;
    };
    return <NumberInput {...props} format={_format} />;
  }

  return (
    <div className="flex flex-col gap-2">
      <NumberInput
        formatType="pattern"
        format="#### #### #### ####"
        value="411111"
        mask="_"
        customInput={Input as React.ComponentType<unknown>}
        {...{ label: "Outline", variant: "outline" }}
      />
      <div className="grid grid-cols-2 gap-2">
        <CardExpiry
          isMask
          formatType="custom"
          placeholder="MM/YY"
          mask={["M", "M", "Y", "Y"]}
          allowEmptyFormatting
          customInput={Input as React.ComponentType<unknown>}
          {...{ variant: "outline" }}
        />
        <NumberInput
          formatType="pattern"
          format="###"
          mask={["C", "V", "C"]}
          allowEmptyFormatting
          customInput={Input as React.ComponentType<unknown>}
          {...{ variant: "outline" }}
        />
      </div>
    </div>
  );
}
```

<div className="mb-16" />

## Credit Card Input Without Gap

You can use credit card input of **NumberInput** without gap.

<Paper className="block">
  <NumberInputWithNoGap />
</Paper>

```tsx
"use client"; 

import { NumberInput, Input, usePatternFormat, NumberInputProps } from "rizzui";

type CardExpiryType = NumberInputProps & {
  isMask?: boolean;
};

function CardExpiry({ isMask = false, ...props }: CardExpiryType) {
  const { format } = usePatternFormat({
    ...props,
    format: "##/##",
  });
  const _format = (val: string) => {
    let month = val.substring(0, 2);
    const year = val.substring(2, 4);

    if (month.length === 1 && parseInt(month[0]) > 1) {
      month = `0${month[0]}`;
    } else if (month.length === 2) {
      if (Number(month) === 0) {
        month = "01";
      } else if (Number(month) > 12) {
        month = "12";
      }
    }
    return isMask ? format(`${month}${year}`) : `${month}/${year}`;
  };
  return <NumberInput {...props} format={_format} />;
}

export default function App() {
  return (
    <div className="flex flex-col">
      <NumberInput
        formatType="pattern"
        format="#### #### #### ####"
        value="411111"
        mask="_"
        customInput={Input as React.ComponentType<unknown>}
        {...{
          label: "Outline",
          variant: "outline",
          inputClassName:
            "border-b-0 rounded-b-none hover:border-b hover:rounded-b focus:border-b focus:rounded-b",
        }}
      />
      <div className="grid grid-cols-2">
        <CardExpiry
          isMask
          formatType="custom"
          placeholder="MM/YY"
          mask={["M", "M", "Y", "Y"]}
          allowEmptyFormatting
          customInput={Input as React.ComponentType<unknown>}
          {...{
            variant: "outline",
            inputClassName:
              "rounded-t-none rounded-br-none hover:rounded-t hover:rounded-br focus:rounded-t focus:rounded-br",
          }}
        />
        <NumberInput
          formatType="pattern"
          format="###"
          mask={["C", "V", "C"]}
          allowEmptyFormatting
          customInput={Input as React.ComponentType<unknown>}
          {...{
            variant: "outline",
            inputClassName:
              "rounded-t-none rounded-bl-none border-l-0 hover:rounded-t hover:rounded-bl hover:border-l focus:rounded-t focus:rounded-bl focus:border-l",
          }}
        />
      </div>
    </div>
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### NumberInput Props

Here is the API documentation of the NumberInput component. We used **react-number-format** package to build the NumberInput component. See their [**official documentation**](https://s-yadav.github.io/react-number-format/docs/intro/) for more info.

<div className="overflow-x-auto">

|          Props           |                                  Type                                   |                                 Description                                 | Default |
| :----------------------: | :---------------------------------------------------------------------: | :-------------------------------------------------------------------------: | :-----: |
|           mask           |                           `string` `string[]`                           |                                                                             |  \_\_   |
|          format          |                   `string` `FormatInputValueFunction`                   |                                                                             |  \_\_   |
|        formatType        |          [NumberInputFormatTypes](#number-input-format-types)           |                 These are the format types of the component                 |  \_\_   |
|      onValueChange       |                             `onValueChange`                             |                                                                             |  \_\_   |
|  value \| defaultValue   |                [NumberInputValues](#number-input-values)                |                                                                             |  \_\_   |
|    thousandSeparator     |                           `string` `boolean`                            |                                                                             |  \_\_   |
|       decimalScale       |                                `boolean`                                |                                                                             |  \_\_   |
|     decimalSeparator     |                                `string`                                 |                                                                             |  \_\_   |
| allowedDecimalSeparators |                               `string[]`                                |                                                                             |  \_\_   |
|    fixedDecimalScale     |                                `boolean`                                |                                                                             |  \_\_   |
|       displayType        |                           `"text"` `"input"`                            |                                                                             |  \_\_   |
|   valueIsNumericString   |                                `boolean`                                |                                                                             |  \_\_   |
|   thousandsGroupStyle    | [NumberInputThousandsGroupStyles](#number-input-thousands-group-styles) |                                                                             |  \_\_   |
|        isAllowed         |               `((values: NumberFormatValues) => boolean)`               |                                                                             |  \_\_   |
|        renderText        |           [NumberInputRenderText](#number-input-render-text)            |                                                                             |  \_\_   |
|       getInputRef        |           [NumberInputGetInputRef](#number-input-getinputref)           |                                                                             |  \_\_   |
|      allowNegative       |                                `boolean`                                |                                                                             |  \_\_   |
|    allowLeadingZeros     |                                `boolean`                                |                                                                             |  \_\_   |
|       customInput        |                        `ComponentType<unknown>`                         |                                                                             |  \_\_   |
|   allowEmptyFormatting   |                                `boolean`                                |                                                                             |  \_\_   |
|       patternChar        |                                `string`                                 |                                                                             |  \_\_   |
|     removeFormatting     |                       `RemoveFormattingFunction`                        |                                                                             |  \_\_   |
|     getCaretBoundary     |                 `(formattedValue: string) => boolean[]`                 |                                                                             |  \_\_   |
|  isValidInputCharacter   |                   `((character: string) => boolean)`                    |                                                                             |  \_\_   |
|        Input ...         |                              `InputProps`                               | Support input props like **variant**, **size**, **rounded** , **error** ... |  \_\_   |

</div>

<div className="mb-10" />

### Number Input Values

```tsx
type NumberInputValues = "string" | "number" | "null";
```

<div className="mb-10" />

### Number Input Format Types

```tsx
type NumberInputFormatType = "pattern" | "numeric" | "custom";
```

<div className="mb-10" />

### Number Input Thousands Group Styles

```tsx
type NumberInputThousandsGroupStyle = "none" | "thousand" | "lakh" | "wan";
```

<div className="mb-10" />

### Number Input Render Text

```tsx
type NumberInputRenderText = (
  formattedValue: string,
  otherProps: Partial<NumberFormatBase>
) => ReactNode;
```

<div className="mb-10" />

### Number Input GetInputRef

```tsx
type NumberInputGetInputRef = Ref<any> | ((el: HTMLInputElement) => void);
```
